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

Question

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

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

有什么想法/建议吗？

Answer 1

虽然您最终可能能够使用 html5范围样式来做到这一点，但目前在大多数现代浏览器中是不可能的。

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

编辑：

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

#myPlugin .container {
  background: #fff;
} 

#myPlugin input {
  border:0;
}

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