定义和用法
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。
n 可以是数字、关键词或公式。
先看下面一段代码:
- 第一行
- 第二行
- 第三行
- 第四行
- 第五行
如果我们想单独给某一行添加特殊的样式代码,在不使用nth-child的情况下,通常会给那一行一个类标签:
,然后再对tag进行定义样式。使用nth-child则会变的很简单:
.demo>li:nth-child(3){color:#000000}
这样我们就对第三行的样式进行了改变,其中3指的就是第三个li,从1开始,以此类推。
更多示例代码:
.demo{
width: 90%;
background-color: #EEEEEE;
padding: .1rem;
border-radius: .15rem;
line-height: .5rem;
margin: .5rem auto;
padding-left: .2rem;
}
.demo li{
margin: .1rem 0;
padding-left: .1rem;
background-color: #52C41A;
color: #000000;
}
.demo>li:nth-child(1){
background-color: #000000;
color: #FFFCE7;
}
.demo>li:nth-child(2){
background-color:#1D52F0;
color: #FFFCE7;
}
.demo>li:nth-child(3){
background-color:#21D1B1;
color: #FFFCE7;
}
拓展:
上面介绍的是单独对某一行写样式,也就是说n是1,2,3....这样的数字,如果数字改成通配符这样的:nth-child(2n),会有何种效果呢?
效果图如下:
也就是说,n通配每一行,2n则是指2的倍数行,也就是第二行和第四行,以此类推。
其实这个功能用的地方也是比较多的,比如表格隔行换色,新闻列表每隔5行加一条横线,都可以用它来实现。
nth-child(3n-1)这样的计算也是允许的。