选择CSS中的第n个元素

是否有可能选择一组元素中的每四个元素?

例:我有16个<div>元素…我可以这样写。

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

还有更好的办法吗?

263196 次浏览
小开
最佳答案

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

下面是你如何重写上面的选择器列表:

div:nth-child(4n)

有关这些算术表达式如何工作的解释，请参阅我对这个问题的回答，以及规范. c。

注意，这个答案假设同一父元素中的所有子元素都是相同的元素类型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
...

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

小开 
div:nth-child(4n+4)

看:http://css-tricks.com/how-nth-child-works/

小开

试试这个

div:nth-child(4n+4)
小开

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

  • 参数应该是an + b的形式，以匹配从b开始的每一个th子元素。

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

    • 如果a为零，则不存在"every ath child"子句。
    • 如果a为负，则从b开始反向匹配。
    • 如果b为零或负，则可以使用正的b编写等效表达式，例如4n+0与4n+4相同。同样地，4n-1与4n+3相同。
      • 李< / ul > < / >

    例子:

    选择每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>

    从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>


提交答案