例如，是否可以选择一组元素中的每个第四个元素？例如：我有16个<div>元素...我可以写类似的东西。

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)


还有更好的方法吗？

评论

希望每个人还活着，只为新手而不是新手，甚至每隔n个元素选择数量，更棘手的事情：nthmaster.com

#1 楼

顾名思义，:nth-child()允许您使用除常数之外的n变量构造算术表达式。您可以执行加法（+），减法（-）和系数乘法（an，其中a是整数，包括正数，负数和零）。

这是重写上述选择器列表的方式：

div:nth-child(4n)


有关这些算术表达式如何工作的解释，请参见我对该问题的回答以及规格。

注意该答案假设同一父元素内的所有子元素都具有相同的元素类型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选择器来做到这一点。请参阅我对这个问题的回答。


顺便说一下，关于: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
...


如您所见，两个选择器将匹配与上面相同的元素。在这种情况下，没有区别。

评论

我只是想补充一下，如果您只执行第四项操作，那么您将需要诸如tr td：nth-​​child（4）之类的操作。请注意括号中缺少任何n

– WORMSS
2014年2月26日13:50
请注意：这仅适用于元素选择器（div，td，img等），不适用于.this之类的选择器

– Sliq
2014年6月4日13:26
我创建了一个交互式演示以直观地说明nth-child（n）的工作原理：xengravity.com/demo/nth-child。我发现w3规范对于允许使用语法的初学者而言尤其令人畏惧；特别是他们的“词法扫描器”部分。

–xengravity
2015年5月6日14:31
@xengravity：感谢您的分享！我同意，该语法不是针对初学者的，因为它是针对实现者而非作者编写的。该规范确实提供了许多有关如何编写语法的示例，但没有附带的视觉效果。

– BoltClock♦
2015年5月6日14:35
我已经制作了类似的工具来处理第n个子表达式：salman-w.googlecode.com/svn/trunk/css/…

–萨拉曼A
2015年8月8日在18:42


#2 楼

div:nth-child(4n+4)


请参阅：http://css-tricks.com/how-nth-child-works/

#3 楼

您需要nth-child伪类的正确参数。


参数应采用an + b的形式，以匹配从b开始的每个ath子代。

a和b都是可选整数，都可以为零或负数。


如果a为零，则不存在“每个子代”子句。
如果a为负，则从b开始向后进行匹配。
如果b为零或负，则可以使用正b编写等效表达式，例如4n+0与4n+4相同。同样4n-1与4n+3相同。



示例：

选择第四个孩子（4、8、12，...）




 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>





从1（1、5、9，...）开始选择第四个孩子




 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>





从4组（3和4、7和8、11和12，...）中选择每个第3和第4个孩子。




 /* 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>





选择前4个项目（4、3、2、1）




 /* 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>




#4 楼

试试这个

div:nth-child(4n+4)