根据出现次数更改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元素。