更改儿童的特异性

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

包装箱内应某上市，但只要它是另一种颜色的子子它应该被覆盖。

感谢您的任何帮助！

来源

2009-12-15 jim red

这是动态的吗？如果不是仅仅使用：class =“box yellow”作为其类 – Treby 2009-12-15 07:55:05

它是黄色的。我猜这个问题在其他地方。可能涉及。黄色浮动或.box被绝对定位的所有内容。无论问题出在哪里，它都不适用于你向我们展示的代码。 – Quentin 2009-12-20 14:02:04

-1

您可能需要使用CSS的重要关键字如：

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

来源

2009-12-15 07:57:22 Sarfraz

这将覆盖设置，但不好的做法。 – 2009-12-15 08:31:58

我不认为它会解决问题。如果你只是把重要的东西放在黄色课堂上，那么黄色总是优先考虑，不管嵌套。如果你把它放在所有的颜色类上，那么你就回到了你开始的地方。 – 2009-12-20 14:00:59

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

来源

2009-12-15 07:59:51 DMI

感谢您的回复。我同意这样做是不好的做法。代码只是一个简单的例子，因为我的元素和代码更复杂。 – 2009-12-15 11:07:15

尝试：