选择 CSS 中的每个第 N 个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3462298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select every Nth element in CSS
提问by Derek Adair
Is it possible to select, say, every fourth element in a set of elements?
是否可以选择一组元素中的每第四个元素？
Ex: I have 16 <div>elements... I could write something like.
例如：我有 16 个<div>元素......我可以写一些类似的东西。
div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)
is there a better way to do this?
有一个更好的方法吗？
回答by BoltClock
As the name implies, :nth-child()allows you to construct an arithmetic expression using the nvariable in addition to constant numbers. You can perform addition (+), subtraction (-) and coefficient multiplication(anwhere ais an integer, including positive numbers, negative numbers and zero).
顾名思义，除了常量之外，还允许您使用变量构造算术表达式。您可以进行加法（）、减法（）和系数乘法（其中是整数，包括正数、负数和零）。:nth-child()n+-ana
Here's how you would rewrite the above selector list:
以下是重写上述选择器列表的方法：
div:nth-child(4n)
For an explanation on how these arithmetic expressions work, see my answer to this question, as well as the spec.
有关这些算术表达式如何工作的解释，请参阅我对这个问题的回答以及规范。
Note that this answer assumes that all of the child elements within the same parent element are of the same element type, div. If you have any other elements of different types such as h1or p, you will need to use :nth-of-type()instead of :nth-child()to ensure you only count divelements:
请注意，此答案假定同一父元素中的所有子元素都具有相同的元素类型div。如果您有任何其他不同类型的元素，例如h1or 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>
For everything else (classes, attributes, or any combination of these), where you're looking for the nth child that matches an arbitrary selector, you will not be able to do this with a pure CSS selector. See my answer to this question.
对于其他所有内容（类、属性或这些的任何组合），您正在寻找与任意选择器匹配的第 n 个子项，您将无法使用纯 CSS 选择器来执行此操作。请参阅我对这个问题的回答。
By the way, there's not much of a difference between 4n and 4n + 4 with regards to :nth-child(). If you use the nvariable, it starts counting at 0. This is what each selector would match:
顺便说一下，关于 4n 和 4n + 4 之间没有太大区别:nth-child()。如果您使用该n变量，它会从 0 开始计数。这是每个选择器将匹配的内容：
:nth-child(4n)
:nth-child(4n)
4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...
:nth-child(4n+4)
: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
...
As you can see, both selectors will match the same elements as above. In this case, there is no difference.
如您所见，两个选择器都将匹配与上述相同的元素。在这种情况下，没有区别。
回答by Tomalak
div:nth-child(4n+4)
回答by Marko
Try this
尝试这个
div:nth-child(4n+4)
回答by Salman A
You need the correct argument for the nth-childpseudo class.
您需要nth-child伪类的正确参数。
The argument should be in the form of
an + bto match every athchild starting from b.Both
aandbare optional integers and both can be zero or negative.- If
ais zero then there is no "every athchild"clause. - If
ais negative then matching is done backwards starting fromb. - If
bis zero or negative then it is possible to write equivalent expression using positivebe.g.4n+0is same as4n+4. Likewise4n-1is same as4n+3.
- If
参数的形式应该是
an + b匹配从 b 开始的每个第a个孩子。这两个
a和b是可选的整数，既可以是零或负数。- 如果
a为零，则没有“every a thchild”子句。 - 如果
a为负，则从 开始向后进行匹配b。 - 如果
b为零或负数，则可以使用正数编写等效表达式，b例如4n+0与4n+4. 同样4n-1与4n+3.
- 如果
Examples:
例子：
Select every 4th child (4, 8, 12, ...)
选择每 4 个孩子（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>Select every 4th child starting from 1 (1, 5, 9, ...)
从 1 (1, 5, 9, ...) 开始选择每 4 个孩子
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>Select every 3rd and 4th child from groups of 4 (3 and 4, 7 and 8, 11 and 12, ...)
从 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>Select first 4 items (4, 3, 2, 1)
选择前 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>