根據出現次數更改css

Question

我想根據用戶類別 出現在父類中的次數來設置用戶div的樣式。我知道如何使用jQuery來做到這一點，但只有css3纔有可能？我只定位到Chrome瀏覽器。

<div class="parent"> 
<div class="user"></div> 
</div> 

<div class="parent"> 
<div class="user"></div> 
<div class="user"></div> 
</div> 

Answer 1

有一個選擇器叫做：nth-​​child（integer）。你可以這樣做

.parent .user:nth-child(1) 

只會影響該.parent中的第一個.user。我不知道爲什麼它不是基於0的，但無論如何。此外，您還可以使用公式，如

.parent .user:nth-child(2n+2) 

這隻會選擇每秒.parent。用戶

這裏的一些更多的閱讀

http://css-tricks.com/how-nth-child-works/

或顯示樣式基礎上如何用戶出現後，有第一個孩子的樣式，然後覆蓋它，同時造型的第二個孩子，並overwriding時，造型第三等解決方案。這裏有一個例子

http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/

Answer 2

有沒有做什麼你問，我所知道的方式。 Gareth Parker所關聯的方法要求您知道會有多少個孩子元素，或知道他們的最大數量。

我得到的最接近是風格，成功一個.user元素的任何.user元素：

​.parent .user { background:red; } 
.parent .user ~ .user { background:blue; } 

這使用~組合子，這是一般兄弟姐妹組合子。

Here它正在起作用。

你也可以，當然，應用類，你知道會裏有一個以上.user元素的任何.parent要素，然後只是針對給定的類內的任何.user元素。