CSSセレクタは私が呼ばれているセレクタを探していた場合

Question

は、私はよく分からない質問 -

...そうしましょうのご希望の人は私の質問を理解し、私持っている（のは言わせて）このような何か：

<div id="mainwrapper" class="default"> 
<div class="boxone"></div> 
<div class="boxtwo"></div> 
... 
</div> 

CSS：

.default {width: 100%; background-color: #fff;} 
.boxone {width: 50%; background: #f00;} 
.boxtwo {width: 50%; background: #0f0;} 

私が行うために必要なものは、（変更mainwrapperのクラス名に「暗い」も、それが子要素だすべてを変更）私のCSSに、このようなものを追加することです。

.dark {background: #000;} 
.dark > .boxone {background: #333;} 
.dark > .boxone {background: #666;} 

私の2番目のCSSは（おそらく）間違っていますが、そのようになっていると思います...しかしどうですか？ ありがとうございます。

Answer 1

.dark .boxone {background: #333;} 
.dark .boxtwo {background: #666;} 

デモ：http://jsfiddle.net/PURLw/1/

Answer 2

.default {width: 100%; background-color: #fff;} 
.default .boxone {width: 50%; background-color: #f00;} 
.default .boxtwo {width: 50%; background-color: #0f0;} 

.dark {width: 100%; background-color: #000;} 
.dark .boxone {width: 50%; background-color: #666;} 
.dark .boxtwo {width: 50%; background-color: #666;} 

たり、動作しますclass="default dark"

.default.dark {background-color: #000;} 
.default.dark .boxone {background-color: #666;} 
.default.dark .boxtwo {background-color: #666;} 

Answer 3

あなたの第二の例を持っているしたいのですが、使用している場合>は.darkの唯一の直接の子が選択されることを意味します。あなたにも孫（と、さらに子供を）選択したい場合は、単に>文字を取り除く：

：クラス .boxoneを持つすべての子を選択し

.dark > .boxone {background: #666;} 

：

クラス.boxoneとの直接の子を選択します

.dark .boxone {background: #666;} 

Answer 4

あなたのCSSは2番目のケースで動作します。 http://jsfiddle.net/8VZZV/

これは、第2のセレクタが最初よりも大きいselector's specificityであるために発生します。

記事を読むhere。

不等号>直接の子を選択するために使用されるが、Internet Explorerがバージョン8でそれをサポートしていますので、私はまた.dark > .boxtwo {background: #666;}