是否可以选择一组元素中的每个第四个元素？
Ex：我有16个<div>元素......我可以写类似的东西。
div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)
有更好的方法吗？
答案 0 :(得分：397)
顾名思义，:nth-child()允许您使用n变量和常数来构造算术表达式。您可以执行加法（+），减法（-）和coefficient multiplication（an，其中a是一个整数，包括正数，负数和零）。
以下是重写上述选择列表的方法：
div:nth-child(4n)
有关这些算术表达式如何工作的说明，请参阅我对this question的回答以及spec。
请注意，此答案假定同一父元素中的所有子元素具有相同的元素类型div。如果您有任何其他不同类型的元素，例如h1或p，则需要使用:nth-of-type()代替:nth-child()，以确保只计算div元素：
<body>
<h1></h1>
<div>1</div> <div>2</div>
<div>3</div> <div>4</div>
<h2></h2>
<div>5</div> <div>6</div>
<div>7</div> <div>8</div>
<h2></h2>
<div>9</div> <div>10</div>
<div>11</div> <div>12</div>
<h2></h2>
<div>13</div> <div>14</div>
<div>15</div> <div>16</div>
</body>
对于其他所有内容（类，属性或这些的任意组合），您正在寻找与任意选择器匹配的第n个子项，您将无法使用纯CSS选择器执行此操作。请参阅我对this question的回答。
顺便说一句，关于:nth-child()，4n和4n + 4之间没有太大区别。如果使用n变量，它将从0开始计数。这是每个选择器匹配的内容：
<强> :nth-child(4n)
4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...
<强> :nth-child(4n+4)
4(0) + 4 = 0 + 4 = 4
4(1) + 4 = 4 + 4 = 8
4(2) + 4 = 8 + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...
如您所见，两个选择器都将匹配上述相同的元素。在这种情况下，没有区别。
答案 1 :(得分：24)
div:nth-child(4n+4)
答案 2 :(得分：12)
试试这个
div:nth-child(4n+4)
答案 3 :(得分：8)
您需要nth-child伪类的正确参数。
参数应采用an + b的形式，以匹配从b开始的每个 th 子元素。
a和b都是可选整数，两者都可以为零或负数。
a为零，那么每个 th 子项＆＃34; 子句都没有＆＃34; a为否定，则从b开始向后匹配。b为零或为负，则可以使用正b来编写等效表达式，例如4n+0与4n+4相同。同样，4n-1与4n+3相同。示例：
li:nth-child(4n) {
background: yellow;
}<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
li:nth-child(4n+1) {
background: yellow;
}<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
/* two selectors are required */
li:nth-child(4n+3),
li:nth-child(4n+4) {
background: yellow;
}<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
/* when a is negative then matching is done backwards */
li:nth-child(-n+4) {
background: yellow;
}<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>