在CSS中选择每第N个元素 [英] Select every Nth element in CSS
问题描述
是否可以选择一组元素中的每四个元素？
例如：我有16 < div> elements ...我可以这样写。
div：nth-child/ pre>
div：nth-child（8），
div：nth-child（12），
div：nth-child（16）
有更好的方法吗？
解决方案顾名思义，
： n th-child（）允许使用/ code>变量，除了常数。您可以执行添加（+），减法（-）和系数乘法（an 其中a是一个整数，包括正数，负数和零）。
以下是重写上述选择器列表的方法：
div：nth-child（4n）
有关这些算术表达式如何工作的说明，请参阅我对的回答此问题以及规范。 / p>
注意，这个答案假设同一父元素中的所有子元素都是相同的元素类型，
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之间的区别不大， c>：nth-child（）。如果你使用
n变量，它开始计数为0.这是每个选择器将匹配：
strong>
：nth-child（4n）4（0）= 0
4（1）= 4
4（2）= 8
4（3）= 12
4（4）= 16
...
：nth-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
...
看，两个选择器将匹配与上面相同的元素。在这种情况下，没有区别。
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.div:nth-child(4), div:nth-child(8), div:nth-child(12), div:nth-child(16)is there a better way to do this?
解决方案As the name implies,
:nth-child()allows you to construct an arithmetic expression using thenvariable in addition to constant numbers. You can perform addition (+), subtraction (-) and coefficient multiplication (anwhereais an integer, including positive numbers, negative numbers and zero).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 ash1orp, you will need to use:nth-of-type()instead of:nth-child()to ensure you only countdivelements:<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.
By the way, there's not much of a difference between 4n and 4n + 4 with regards to
:nth-child(). If you use thenvariable, it starts counting at 0. This is what each selector would match:
: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 ...As you can see, both selectors will match the same elements as above. In this case, there is no difference.
这篇关于在CSS中选择每第N个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
