CSS 选择器 :nth-child 用法

Jul 24, 2018CSS点击

从 :nth-child 中的 nth 就可以猜到是根据顺序选择元素

:nth-child 接收一个参数

这个参数可以是数字，可以是'odd'或'even'，也可以是 an+b

1
2
3

li:nth-child(5) {
    color: green;   
}

如果只选第一个元素的话，可以使用 :first-child

1
2
3

li:nth-child(n+6) {
    color: green;   
}

1
2
3

li:nth-child(-n+5) {
    color: green;   
}

1
2
3

li:nth-child(4n-7) {
    color: green;   
}

1
2
3

li:nth-child(odd) {
    color: green;   
}

1
2
3

li:nth-child(even) {
    color: green;   
}

1
2
3

li:last-child{
    color: green;   
}

1
2
3

li:nth-last-child(2) {
    color: green;
}

体验小程序「简易记账」

关注公众号「特想学英语」

为您推荐