例如,是否可以选择一组元素中的每个第四个元素?
例如:我有16个<div>
元素...我可以写类似的东西。
div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)
有一个更好的方法吗?
例如,是否可以选择一组元素中的每个第四个元素?
例如:我有16个<div>
元素...我可以写类似的东西。
div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)
有一个更好的方法吗?
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
。例子:
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>
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>
/* 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>
/* 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>
尝试这个