重置嵌入式脚本的CSS

Question

我正在开发一个网站管理员嵌入其网站的JS应用程序。它会为其网站添加一个具有特定功能的固定元素，以及在页面<style>中带有css的head标记，以便对其进行样式设置。在这方面，它与wibiya非常相似。

我无法为此要求找到正确的css规则：

• 我的样式不会重载页面中元素的样式
• 页面样式不会重载我的样式
• 如果页面声明important!
，我的风格应该占上风

我正在准备好在DOM上插入CSS，但我无法保证我的样式是插入页面的最后一个。

我不是在页面内编辑元素。我有一个容器，我的所有元素都在容器内。

我特意为容器及其中的所有对象尝试了Meyer的CSS重置，但网站规则仍然覆盖了我的规则。

我该如何处理？

Answer 1

你需要比他们的规则更具体。的 Here's an article on the subject!

例如，如果他们的规则如下：

.button { background: red; }

如果你更具体：

a.button {}
body .button {}

你的规则将获胜。

---

如果嵌入页面使用！important规则，则需要使用更具体的！重要规则。但是尽量不要在你和剧本之间展开规则战争。结果通常是意料之外的！

Answer 2

所以你有一个样式表来设计你的“模块”？这里有一些提示：

1. 通过最后加载CSS来覆盖样式。通常情况下，为了避免jQuery UI被我的样式覆盖，为了安全起见，我最后加载它的CSS。

2. 样式的重要性顺序（据我记忆）按此顺序排列：

   1. 浏览器样式
   2. 样式表样式
   3. 内联样式
   4. !important个样式
   5. 用户定义/用户脚本样式（自定义浏览器字体和颜色）。

   这就是为什么像jQuery这样的库应用内联样式（而不是addClass方法），因为它总是覆盖样式表样式，无论特殊性如何。但您可以使用!important

   覆盖它们

   6. Know specificity。这也是jQuery UI样式表具有非常长/特定样式声明的原因。它越具体，越难以覆盖。为了证明，即使红色的定义出现在它之后，以下也总是绿色的：

   demo：

   <span class="red">I'm supposed to be red</span>​
   
   span.red{color:green}
   .red{color:red}