Question

好的，这是一个粗略的过度简化，但我有一个javascript应用程序来帮助人们开发网页。它的界面叠加在正在开发的页面上，除了一件事之外，它都可以正常工作。

如果正在开发的网页使用界面中使用的div类，则界面的嵌入式样式表将覆盖网页的属性！

这发生在jsfiddle上，嵌入式css优先于外部css。

外部css：

.color {
    color: green;
}

的index.html：

 <style> 
    .color {
       color: blue;
    }
</style>
<div class="color"> Text to be coloured </div>

运行时，文字为蓝色。如果有人能让文本变成绿色，我认为它会证明如何克服这个问题。

显然，解决这个问题的一种方法是将接口类和规则更改为：

<style> 
  .color_interface {
     color: blue;
   }
</style>
<div class="color_interface"> Text to be coloured </div>

并使它们独一无二，但该项目有数百条css规则，我只是想知道是否有更好的方法，更安全的方式（还有一个小的机会，有人有规则“color_interface”）做无效css规则，因此它们不会污染页面。

我认为唯一可行的方法可能是关于我的规则的'重置'样式表，将它们全部恢复为默认值。有没有办法用jquery动态地执行此操作，也许？

Answer 1

您所见证的是CSS设计。具体而言，specificity。

如果您的目标是发布可以公开使用的某种类型的库，并且您希望避免命名冲突，我认为公平的做法是简单地命名您的选择器，例如.starkers-color { color: blue; }。这不一定会避免特殊性问题，但它应该防止实施者覆盖您的选择器。

Answer 2

如果你检查JSFiddle页面，你会发现它不起作用的原因是你的内联样式定义放在它没有效果的正文中。

您指定的CSS规则将替换为head元素中的内联样式。

解决您的问题：再次，参考JSFiddle，是否可以在iframe中的开发中加载页面？这意味着您可以获得所需的分离。

Answer 3

这是因为渲染时CSS的顺序。您的包含位于页面顶部，但您的样式标记低于该值，这意味着您的样式标记将始终优先于您包含在顶部。您可以尝试添加一个重要的css包含，但这主要是hacky，可能会产生一大堆新问题。