:nth-child() 选择器

1.   选择器

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。   

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

2. 用法举例

li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/
li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/
li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/
.table > tr:nth-child(even) > td {}  (偶数行)
.table > tr:nth-child(odd) > td {background-color: #ccc;}  (奇数行)

猜你喜欢

转载自www.cnblogs.com/justSmile2/p/9759587.html