e:nth-child(n){ srules }
* 匹配父元素索引为n的子元素E
Figure 1:<section id="demo"> <h1>选取ul第一个子元素li</h1> <ul> <li>如果我是红色，说明你的选择到了我，浏览器还颇为先进</li> <li>落后的浏览器</li> <li>落后的浏览器</li> <li>落后的浏览器...#demo li:nth-child(1){ color:#f00;}* 除lte IE8浏览器外，你都能看到第一个li被匹配到，且文本为红色；
Figure 2:<section id="demo"> <h1>选取#demo第一个子元素p</h1> <p>如果你以为我会被选中变红，那你就猜错了</p> <p>落后的浏览器</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <p>落后的浏览器</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <p>落后的浏览器...#demo p:nth-child(1){ color:#f00;}* 上诉代码是不是让你感觉第一p元素会被匹配到？如果你真这么想，那你就真的错了，这里没有任何一个元素会被匹配到；
Figure 3:#demo p:nth-child(2){ color:#f00;}* 将Figure #2中的CSS伪类 #demo p:nth-child(1) 改成 #demo p:nth-child(2) 你会发现第一个p才被选中变红，why? 不急，我们再往下看看；
Figure 4:#demo :nth-child(2){ color:#f00;}
* 我们再将Figure #3中的CSS伪类 #demo p:nth-child(2) 改成 #demo :nth-child(2) ，把p tag从选择器中去除，你会发现第一个p同样被选中变红。貌似这个才是能符合我们正常思维的，因为第1个p是#demo的第二个子元素；也就是说在本 DEMO 中 #demo p:nth-child(2) 与 #demo :nth-child(2) 是等价的；
* 你觉得这难理解么？CSS选择器是从右到左查询的，我猜你已经知道了这个。E:nth-child(n) 表示的是匹配父元素第2个子元素，如果第2个子元素正好是E，则被匹配到；
* 相信现在 Figure #2 为什么没有任何元素被选中，你已经可以理解了。因为#demo的第一个子元素并不是p，而是一个h1，所以这个选择器是无效的；
* 而 Figure #3 选择器 #demo p:nth-child(2) 表示匹配 #demo 的第2个子元素p，此时 #demo 的第2个子元素正好是一个p，所以被匹配到；
* 相对于 Figure #2 和 Figure #3，本例中的 #demo :nth-child(2) 表示直接选择 #demo 第2个子元素，不论这个子元素是任何标签，都将被匹配到；
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
940
收藏
