为嵌入式脚本重置CSS

Question

我正在开发一个网站管理员在其网站上嵌入的JS应用程序。它通过一定的功能为其网站添加了一个固定元素，并在网页的head中添加了一个带有css的<style>标签，以便对其进行设计。这方面与wibiya非常相似。

我很难找到正确的CSS规则这方面的要求：

• 我的风格不会过载风格的元素在页面
• 的页面样式不会过载我的风格
• 我的风格应该仍然有优势，如果页面声明的东西important!

我插入的CSS准备DOM，但我没有保证，我的风格是最后一个插入到页面中。

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

我尝试了Meyer的CSS Reset，专门为容器和所有对象，但是站点规则仍然覆盖我的规则。

我该如何处理？

Answer 1

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

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

2. （据我记得）风格的重要性的顺序是按以下顺序：

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

   这就是为什么像jQuery这样的图书馆应用内联样式（与addClass方法相反），因为它总是覆盖样式表样式，无论其特性如何。但你可以使用!important

3. Know specificity。这也是jQuery UI样式表具有非常长/特定样式声明的原因。它越具体，越难覆盖。演示，下面永远是即使红的定义来后，绿色：

demo：

<span class="red">I'm supposed to be red</span>​ 

span.red{color:green} 
.red{color:red} 

Answer 2

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

举例来说，如果他们的规则如下：

.button { background: red; } 

如果你是更具体：

a.button {} 
body .button {} 

你的规则会获胜。

---

如果嵌入式页面使用！重要规则，则需要使用更具体的重要规则。但是尽量不要在你和脚本之间发起规则战争。结果通常是意想不到的！