最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法,觉得十分实用,就自己尝试了一下,并把它给记录下来:
这是最基本的样式:
1
body内的内容:
1
2
3
第01个li>4
第02个li>5
第03个li>6
第04个li>7
第05个li>8
第06个li>9
第07个li>10
第08个li>11
第09个li>12
第10个li>13
第11个li>14 ul>
15 body>
首先是最基本的结构性伪类选择器的用法:
1 li:nth-child(8){
2 background-color:#298EB2;
4 }
结果展示为:
利用:nth-child(n+6) 相当于:nth-child(6)及以上的li标签元素:
1 li:nth-child(n+6){
2 background-color:#298EB2;
4 }
结果展示为:
同理利用:nth-child(-n+6) 相当于:nth-child(6)及以下的li标签元素:
1 li:nth-child(-n+6){
2 background-color:#298EB2;
4 }
结果展示为:
根据以上原理我们可以来一些进阶的:
比如可以利用 nth-child(n+4):nth-child(-n+8) 达到获取:nth-child(4)及以上和:nth-child(8)及以下的li标签元素:
1 li:nth-child(n+4):nth-child(-n+8){
2 background-color:#298EB2;
3 }
结果展示为:
还可以利用 :nth-child(n+2):nth-child(odd):nth-child(-n+8) 获取:nth-child(n+2)到:nth-child(-n+8)之间的单数li标签元素:
1 li:nth-child(n+2):nth-child(odd):nth-child(-n+8){
2 background-color:#298EB2;
3 }
结果展示为:
最后我们还可以利用:nth-child(3n+1)获取数目为1、4、7、10中的偶数li标签元素:
1 li:nth-child(3n+1):nth-child(even){
2 background-color:#298EB2;
3 }
结果展示为: