CSS3: nth-child使用总结
CSS3:nth-child使用总结
CSS3:nth-child选择属于其父元素的指定位置的子元素。写法上大体有以下几种：
1、简单数字
获取具体单个元素
ul li:nth-child(3) {background-color: #000;} //设置第3个li的背景色为黑色
2、公式写法
具体格式:nth-child(an+b)，a与b为任意有效的整数，n取值范围是有些的自然数，最终计算相应结果，b可以省略。
ul li:nth-child(3n) {background-color: #000;} //设置第3，6，9,...等有效li的背景色为黑色
ul li:nth-child(3n+1) {background-color: #000;} //设置第1，4，7,...等有效li的背景色为黑色
ul li:nth-child(-3n) {background-color: #000;} //计算结果均为负，没有选中任何li
ul li:nth-child(-3n+5) {background-color: #000;} //设置第2，5个li的背景色为黑色
3、奇偶选择
:nth-child(odd) 匹配序号为奇数的元素，等同于:nth-child(2n+1)
:nth-child(even)匹配序号为偶数的元素，等同于:nth-child(2n)
————————————————————————
转载于：
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wong_Lin/article/details/52796866