只做利于SEO的网站,提供网站建设、SEO、网站代运营等服务。服务中心 | 建站流程 | 网站地图

nth-child()类选择器选择倍数元素

2024-03-05小猴建站 阅读()相关主题:

做网站建设经常会做一些彩色标签,可以用JS实现,当然也可以用类选择器实现,比如::first-child,:last-child 这些。元素比较多的时候就可以用 :nth-child(n) ,

定义和用法

:nth-child(n)选择器匹配属于其父元素的第N个子元素,不论元素的类型
n 可以是数字、关键词或公式

(1)数字的话就是指定第几个,就是字面上的意思。

(2)关键词就是类似奇数偶数这种。

第1个子元素的下标是1

(3)公式

(an + b),周期长度,n是计数器(从 0 开始),b是偏移值,比如下面例子

ul li:nth-child(5n+1)表示选取第1个和第6个li,即
当 n = 0 时,结果是 :nth-child(1)
当 n = 1 时,结果是 :nth-child(6)

这个很容易实现表格的隔行换色功能,用类选择器选择奇偶数元素就好,写法如下

HTML部分

<ul>
 <li>第一行</li>
 <li>第二行</li>
 <li>第三行</li>
</ul>

CSS部分

ul li:nth-child(2n+1){background:#eee}
ul li:nth-child(2n){background:#c00}