使用nth-child制作棋盘图案

Question

我正在努力实现一些相对简单的东西。

我需要使用CSS :nth-child()选择每个页面上的第3个和第4个元素，你能告诉我如何做吗？

如果有JS解决方案也欢迎提供。

非常感谢。

***编辑

抱歉大家，我的问题表述得不太清楚。下面附上一个示例以说明我的需求。

这是我需要的结果， http://jsfiddle.net/8FXL6/

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

避免硬编码类名。

- peduarte

---

请添加一些示例标记和您期望找到的内容。 - Jamiec

Answer 1

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

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

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

演示

从您的编辑中，您需要：

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

演示

- Asad Saeeduddin

---

感谢您的评论。请查看我上面的编辑，那里有一个jsfiddle例子。 您的代码不符合我的需求 :( - peduarte

@peduarte，你的CSS中有多余的括号，这就是为什么它无法工作的原因 - http://jsfiddle.net/8FXL6/4/ - WTK

@peduarte 我已经为您制作了一个 fiddle。请点击第二个DEMO链接。 - Asad Saeeduddin

我的错。这是完美的。非常聪明。+1 - peduarte

Answer 2

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

演示链接

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

- Adil

---

感谢您的评论。请看一下我上面的编辑，有一个jsfiddle示例。 - peduarte

谢谢，但是那只选择了第二个和第三个。它需要继续下去...例如：http://jsfiddle.net/8FXL6/ - peduarte

Answer 3

使用仅 CSS 怎么样？

每三个元素：

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

每四个元素：

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

这是关于 IT 的内容。以下是翻译文本：

这里有一个 jsfiddle 的演示：http://jsfiddle.net/dufsx/

- WTK

---

感谢您的评论。请看一下我上面的编辑，有一个jsfiddle示例。 - peduarte

Answer 4

可以仅使用 CSS 解决这个问题。

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

实时演示

- Naveen Sharma