html - 改变 child 的特异性

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 或 div.colour1)。