定義類的'>'符號

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，而這些都是要應用上，你可以省略樣式的只有兩個元素的>（也許給他們一個ID而不是一個類）。

Answer 3

您可以爲您的div分配類或ID，具體取決於最適合的內容。

或者，CSS3支持more precise pseudo classes，但您會發現所有瀏覽器都不支持這些功能。