是否可以选择一组元素中的每四个元素？
例如：我有16 < div& elements ...我可以这样写。
div：nth-child div：nth-child（8）， div：nth-child（12）， div：nth-child（16） / pre>有更好的方法吗？
解决方案顾名思义，： n th-child（）允许使用 / code>变量，除了常数。您可以执行添加（ + ），减法（ - ）和系数乘法（ 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之间没有太大的区别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 the n variable in addition to constant numbers. You can perform addition (+), subtraction (-) and coefficient multiplication (an where a is 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 as h1 or p, you will need to use :nth-of-type() instead of :nth-child() to ensure you only count div elements:
<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 the n variable, 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个元素
发布评论