html - 子供ごとに特異度を変える

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

問題はよくわかりません。そのコードで得られるものは次のとおりです。

代替テキストhttp://www.pauldwaite.co.uk/images/so/1905834.png

Answer 2

試す：

.box { background-color: inherit;  }

参照: http://jsbin.com/imube/edit

Answer 3

おそらく、CSS の!importantキーワードを使用する必要があります。例:

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