nth-child CSS - 匹配第2,第5,第8 ......元素
Sonder
2021-08-19
466字
1分钟
浏览 (4.8k)
我有一个HTML列表,在CSS的帮助下,我安排了3列的行。
因此,如果列表有6个元素,那么它将是2行x 3列,9个元素 - 3 x 3,12个元素 - 4 x 3等等。
如何使用CSS nth-child选择器选择每行的中间元素?即,第2,第5,第8 ……元素。
匹配第2,第5,第8 ……元素
:nth-child(3n+2) {
// your css rules here
}
基本上,3n表示“每三分之一”,而+2表示“从第二位开始”。
匹配第3,第7,第11 ……元素
:nth-child(4n-1) {
// your css rules here
}
1,5,9
&:nth-child(4n+1) {
margin-left: 0;
}
在此处阅读更多内容:https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child