javascript - 为嵌入式脚本重置 CSS

Question

我正在开发一个网站管理员嵌入到他们网站上的 JS 应用程序。它向他们的网站添加了一个具有特定功能的固定元素，以及一个 <style>。在 head 中使用 css 标记页面的样式。它与 wibiya 非常相似在这方面。

我找不到满足此要求的正确 css 规则:

• 我的样式不会重载页面中元素的样式
• 页面样式不会重载我的样式
• 如果页面声明了一些东西，我的风格应该仍然占上风 important!

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

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

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

我该如何处理？

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}