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

Question

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

我想将 normalize.css 样式表应用到我的插件而不使用 iframe 或影响页面的其余部分(这意味着我无法嵌入 normalize.css stylehseet 直接在我的插件中)。

有什么想法/建议吗？

Answer 1

虽然您最终可以使用 html5 scoped styles 做到这一点, 目前在大多数情况下不可能 modern browsers .

您必须为您的插件元素提供一个类或 ID，并在您的插件的 css 文件中(或通过 javascript)手动“规范化”这些元素。

编辑:

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

#myPlugin .container {
  background: #fff;
} 

#myPlugin input {
  border:0;
}

正如 Tibos 提到的，!important 的核选项可能是最好的选择，但最好在极端情况下保存它(比如布局完全破坏)。如果需要，让您的用户有机会覆盖您的样式通常是一件好事。