1

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

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

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

JSfIDLE

外部CSS：

.color {
    color: green;
}

索引.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动态地做到这一点，也许？

4

3 回答 3

2

您所看到的是设计的 CSS。具体来说，特异性。

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

于 2013-08-20T12:10:09.950 回答
0

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

您指定的 CSS 规则将作为内联样式放置在 head 元素中。

对于您的问题：再次参考 JSFiddle，是否可以在 iframe 中加载开发中的页面？这意味着你得到了你需要的分离。

于 2013-08-20T12:13:56.553 回答
-1

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

于 2013-08-20T12:12:58.027 回答