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>

score 1 · Accepted Answer

有一个名为 :nth-child(integer) 的选择器。你可以这样做

.parent .user:nth-child(1)

只会影响该 .parent 中的第一个 .user。我不知道为什么它不是基于 0 的，但无论如何。此外，您可以使用方程式，例如

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

只会选择每秒 .parent .user

这里还有一些阅读

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

score 1 · Accepted Answer

没有办法做你所要求的，我知道。Gareth Parker 链接到的方法要求您要么知道将有多少子元素，要么知道它们的最大数量。

我得到的最接近的是样式化任何.user一个元素之后的.user元素：

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

这使用了~组合器，即 General Sibling 组合器。

这是在行动。

当然，您也可以将一个类应用于.parent您知道其中包含多个.user元素的任何元素，然后只针对.user该给定类中的任何元素。

2 回答 2