Normalize-css在页面的一部分上

Question

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

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

有任何想法/建议吗？

Answer 1

虽然您最终可以使用HTML5 scoped styles执行此操作，但目前大多数modern browsers都无法使用此功能。

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

修改

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

#myPlugin .container {
  background: #fff;
} 

#myPlugin input {
  border:0;
}

正如蒂博斯所提到的那样，!important的核选择，但最好是在极端情况下保存这种情况（如布局完全破坏）。如果有必要，让用户有机会覆盖你的风格通常是件好事。