クラスを定義する '>'記号

Question

異なるスタイルの要素にどのように子を定義できますか？

#test > div[0] { 
background:red; 
} 

#test > div[1] { 
background:blue; 
} 

<div id="test"> 
<div>red bg</div> 
<di>blue bg</div> 
</div> 

Answer 1

または構造疑似クラスを使用する：

#test > div:nth-child(n) 

しかしIE or FF3

あるいはでサポートされていません。 （ただし、IE6ではサポートされていません）

#test > div { background-color:#f00;} 
#test > div + div { background-color:#0f0;} 
#test > div + div + div { background-color:#00f;} 
#test > div + div + div + etc.... 

Answer 2

あなたはそれらの要素にクラス与えることができる：

#test > .red { 
    background-color: red; 
} 

#test > .blue { 
    background-color: blue; 
} 

<div id="test"> 
    <div class="red">red bg</div> 
    <div class="blue">blue bg</div> 
</div> 

をしかしchild selector is not supported in IE6ことに注意してください。

更新：あなたはまだIE6をサポートしたいとそれらを使用すると、上のスタイルを適用したい2つの要素だけであれば、あなただけの>を省略し（そしておそらく彼らに代わり、クラスのIDを与える）ことができます。

Answer 3

あなたのdivにクラスやIDを割り当てることができます。

また、CSS3はmore precise pseudo classesをサポートしていますが、すべてのブラウザでサポートされているとは限りません。