星空网 > 软件开发 > 网页设计

CSS3之 :nth

语法:

E:nth-child(n){ sRules }

* 匹配父元素索引为n的子元素E

:nth-child(n) 让你匹配到父元素的任一子元素:

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>落后的浏览器</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个子元素,不论这个子元素是任何标签,都将被匹配到;

 




原标题:CSS3之 :nth

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

亚马逊浏览量和访客数的区别是什么?:https://www.kjdsnews.com/a/1454279.html
南航物流拟分拆上市;Tik Tok重组电商部门:https://www.kjdsnews.com/a/1454280.html
跨境物流涉及到的环节需要哪些不同的文件?:https://www.kjdsnews.com/a/1454281.html
独立站优秀案例分析:家居品牌如何突出重围?:https://www.kjdsnews.com/a/1454282.html
父亲节将至,eBay平台上这些品类有望迎来消费热潮:https://www.kjdsnews.com/a/1454283.html
精华篇:亚马逊最全广告位解读:https://www.kjdsnews.com/a/1454284.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流