关于第 n 个 CSS 的问题答案

【问题标题】：A question on nth CSS关于第 n 个 CSS 的问题
【发布时间】：2011-07-13 22:59:59
【问题描述】：

我有 12 个 div。

我需要选择标记为 THIS 的那些。我在想某种 nth child 魔法？

谢谢！

即。

<div class="feature"></div>
<div class="feature"></div> -> THIS
<div class="feature"></div>
<div class="feature"></div>
<div class="feature"></div> -> THIS
<div class="feature"></div>
<div class="feature"></div>
<div class="feature"></div> -> THIS
<div class="feature"></div>
<div class="feature"></div>
<div class="feature"></div> -> THIS
<div class="feature"></div>

【问题讨论】：

那么你想要的是从每组三个中选择第二个的东西？
你会接受这样一个答案，即在 onload 中使用不显眼的 JavaScript 来查找三个 div 中的第二个并向它们添加一个类吗？
在我写这样的东西之前，你可以只针对 CSS3 吗？如果是这样，请选择第 n 个孩子的答案。我不知道有任何 CSS2 选择器可以做到这一点。从头开始 - jQuery 让它工作。

标签： css css-selectors

【解决方案1】：

您可以将nth-child pseudo-selector 与数字表达式一起使用：

div.feature:nth-child(3n+2) {
    background-color:#cccccc;
}

3n+2 表示从第二行开始每隔三行。

顺便说一句，SitePoint 上的链接说除了 IE8 支持之外的所有现代浏览器都具有完全支持。 IE9 完全支持，不过make sure you are not in compatibility mode.

【讨论】：

【解决方案2】：

您正在考虑需要选择器:nth-child(3n+2)。

参考：http://css-tricks.com/examples/nth-child-tester/

【讨论】：

【解决方案3】：

根据 ob Sarfraz 的回答，N 可以设置为 3n - 1

.feature:nth-child(3n-1){ ... }

【讨论】：