选择CSS中的每N个元素

一尘不染

选择CSS中的每N个元素

css

例如，是否可以选择一组元素中的每个第四个元素？

例如：我有16个<div>元素…我可以写类似的东西。

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

有一个更好的方法吗？

阅读 988

2020-05-16

共1个答案

一尘不染

顾名思义，它允许您使用除常数以外的变量构造算术表达式。您可以执行加法（），减法（）和系数乘法（其中是整数，包括正数，负数和零）。:**n** th-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选择器来完成此操作。

顺便说一下，关于，4n和4n + 4之间没有太大区别:nth-child()。如果使用该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
...

如您所见，两个选择器将与上述相同的元素匹配，没有区别。

2020-05-16