css - 根据出现次数更改 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 .user

这里有更多的阅读

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

或者根据 .user 出现的次数来显示样式，解决方案是为第一个子项设置样式，然后覆盖它，同时为第二个子项设置样式，并在为第三个子项设置样式时覆盖它，依此类推。这是一个例子

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