有时我们会碰到这样的需求, 需要选取第 n 个元素, 让它显示不同的样式.
first-child 表示选择列表中的第一个标签. 例如: li:first-child{background:#fff}
2,last-child
last-child 表示选择列表中的最后一个标签, 例如: li:last-child{background:#fff}
3,nth-child(3)
表示选择列表中的第 3 个标签, 例如: li:nth-child(3){background:#fff}, 代码中的 3 也可以改成其它数字, 如 4,5 等. 想选择第几个标签, 就填写几.
4,nth-child(2n)
这个表示选择列表中的偶数标签, 即选择 第 2, 第 4, 第 6...... 标签, 例如: li:nth-child(2n){background:#fff}
5,nth-child(2n-1)
这个表示选择列表中的奇数标签, 即选择 第 1, 第 3, 第 5, 第 7...... 标签, 例如: li:nth-child(2n-1){background:#fff}
6,nth-child(n+3)
这个表示选择列表中的标签从第 3 个开始到最后.
7,nth-child(-n+3)
这个表示选择列表中的标签从 0 到 3, 即小于 3 的标签.
8,nth-last-child(3)
这个表示选择列表中的倒数第 3 个标签.
本文来自 CSS 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/14629.html