21. CSS3 结构性伪类选择器 :nth-child(n)

:nth-child(n)选择器用来定位某个父元素一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。

经验与技巧:

:nth-child(n)选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。如下表所示:

 

n 2n+1 4n+1 4n+4 4n 5n-2 -n+3
0 1 1 4 0 -2 3
1 3 5 8 4 3 2
2 5 9 12 8 8 1
3 7 13 16 12 13 0
4 9 17 20 16 18 -1
5 11 21 24 20 23 -2

实例演示

通过:nth-child(n)选择器,并且参数使用表达式“2n”,将偶数行列表背景色设置为橙色。

HTML代码:

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ol>​

CSS代码:

ol > li:nth-child(2n){
  background: orange;
}

效果如下:

CSS3 结构性伪类选择器 :nth-child(n)

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 21. CSS3 结构性伪类选择器 :nth-child(n)

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们