0

我想将主题标签集成到我的元素中，以便它们以不同的颜色显示。但是由于 css 选择器具有相同的 css 特异性，因此最新的会覆盖之前定义的规则。

这是一个显示我的问题的示例：

<div class="red">
  <div class="box">This should be red</div>
  <div class="yellow">
    ...
        <div class="box">This should be yellow (nested in x levels under the div.yellow)</div>
    ...
</div>

这里是我的 CSS

.box { width: 100px; height: 100px; }
.yellow { background-color: yellow; }
.red { background-color: red; }

该框应该在某处列出，但是一旦它是另一个颜色定义的子子项，它就应该被覆盖。

谢谢你的帮助！

4

4 回答 4

1

你不应该真的以这种方式做事——如果你的主题改变了，那么突然之间有类的东西yellow实际上可能是蓝色的，例如。我建议找到一种通用的命名方式（即使它只是colour1, colour2, colour-highlight...），然后指定这些样式。然后，您可以查看您的页面的设计方式，并根据需要使规则更具体（通过使用!important或使规则更具体，例如.colour1成为.box .colour1或div.colour1）。

于 2009-12-15T07:59:51.280 回答
0

我不太明白这个问题。这是我使用该代码得到的结果：

替代文字 http://www.pauldwaite.co.uk/images/so/1905834.png

于 2009-12-20T13:59:28.940 回答
0

尝试：

.box { background-color: inherit;  }

见：http: //jsbin.com/imube/edit

于 2009-12-17T14:50:54.247 回答
-1

您可能需要使用 CSS 的!important关键字，例如：

.yellow { background-color: yellow !important;}
于 2009-12-15T07:57:22.827 回答