Question

我想将主题标签整合到我的元素中，以便它们以不同的颜色显示。但由于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; }

该框应列在某处，但只要它是另一种颜色定义的子子，就应该被覆盖。

感谢您的帮助！

Answer 1

你不应该这样做 - 如果你的主题发生了变化，那么突然，类yellow的内容实际上可能是蓝色的。我建议找到一种常用的命名方式（即使只是colour1，colour2，colour-highlight ...）然后指定这些样式。然后，您可以查看网页的设计方式，并根据需要使规则更具体（使用!important或使规则更具体，例如.colour1成为.box .colour1或{ {1}}）。

Answer 2

尝试：

.box { background-color: inherit;  }

请参阅： http://jsbin.com/imube/edit

Answer 3

我不太明白这个问题。这是我得到的代码：

alt text http://www.pauldwaite.co.uk/images/so/1905834.png

Answer 4

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

.yellow { background-color: yellow !important;}

通过孩子改变特异性

4 个答案: