首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ CSS / 文章详情

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

转自:https://www.thinbug.com/q/6692145

下一篇 / service nginx start|stop|reload 报错:Failed to reload nginx.service: Unit not found.【解决方案】

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)