在页面的一部分上规范化 css

Question

我正在开发一个可以通过用户书签访问的js插件。当用户按下书签时，插件会显示一个弹出窗口，其中包含一个表单，允许他键入和保存注释。

我想在不使用 iframe 或影响页面其余部分的情况下将normalize.css样式表应用于我的插件（这意味着我不能将normalize.css样式直接嵌入我的插件中）。

任何想法/建议？

Answer 1

虽然您最终可以使用 html5 作用域样式执行此操作，但目前在大多数现代浏览器中都无法做到这一点。

你必须给你的插件元素

一个类或id，并在插件的css文件中手动"规范化"这些元素（或通过javascript）。

编辑：

扩展我的回答 re： @Tibos评论：您永远无法绝对确定您的插件 elmenets 不会有不同的样式，但您可以通过用 id 命名您的插件来在您的 css 中提供合理数量的特异性：

#myPlugin .container {
  background: #fff;
} 
#myPlugin input {
  border:0;
}

正如Tibos所提到的，有!important的核选择，但最好将其保存在极端情况下（例如布局完全破坏）。通常，让用户有机会在必要时覆盖您的样式是一件好事。