javascript - 使用 nth-child 制作国际象棋图案

Question

我正在努力实现一些相对简单的事情。

我需要选择页面上的每个第 3 和第 4 个元素，如何使用 css :nth-child() 来做到这一点？

也欢迎 JS 回答。

非常感谢。

***编辑

抱歉伙计们，我的问题写得不好。我在下面附上了我需要的示例。

        <li></li>
        <li class="highlight"></li>
        <li class="highlight"></li>
        <li></li>
        <li></li>
        etc

无需对类名进行硬编码。

score 12 · Accepted Answer

*:nth-child(3),*:nth-child(4){
}

从技术上讲，这会选择其容器中的第 3 或第 4 个子元素。如果要选择每个第 3 或第 4 个元素（3、4、6、8 等），请使用：

*:nth-child(3n),*:nth-child(4n){
}

从您的编辑中，您需要：

li:nth-child(4n-2),li:nth-child(4n-1){
}

score 4 · Accepted Answer

您可以使用逗号来组合选择器，使用nth-child来获取元素，

elements = $('div .className :nth-child(3), div .className :nth-child(4)');

score 1 · Accepted Answer

只使用css怎么样？

每三个元素：

*:nth-child(3n+3) {color: red}

每四个元素：

*:nth-child(4n+4) {color: blue}

这是关于 jsfiddle 的演示：http: //jsfiddle.net/dufsx/

score 0 · Accepted Answer

这只能使用 CSS 解决

 *:nth-child(4n+2){background:blue;color: white;}
 *:nth-child(4n+3){background:blue;color: white;}

4 回答 4