选择CSS中的每N个元素

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

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

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

有一个更好的方法吗?

ProTom2020/03/24 18:42:27

尝试这个

div:nth-child(4n+4)
小卤蛋2020/03/24 18:42:27
div:nth-child(4n+4) 

请参阅:http : //css-tricks.com/how-nth-child-works/

Mandy2020/03/24 18:42:27

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

  • 参数的形式应an + b为匹配从b开始的每个 a 孩子。

  • 这两个ab是可选的整数,既可以是零或负数。

    • 如果a为零,则没有“每次孩子”的条款。
    • 如果a为负,则从开始向后进行匹配b
    • 如果b为零或负数,则可以使用正数编写等效表达式,b例如4n+0与相同4n+4同样4n-1是相同4n+3

例子:

选择第四个孩子(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,...)开始选择每个第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>

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