例如，是否可以选择一组元素中的每个第四个元素？
例如：我有16个<div>元素...我可以写类似的东西。
div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)
有一个更好的方法吗？
选择CSS中的每N个元素
第3680篇《选择CSS中的每N个元素》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共3个回答
div:nth-child(4n+4)
您需要nth-child伪类的正确参数。
参数的形式应
an + b为匹配从b开始的每个第 a 个孩子。这两个
a和b是可选的整数，既可以是零或负数。- 如果
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>相似问题
问题类别
尝试这个