为什么选择器:last-child有时没有起作用?


想要有.list样式的最后一个不要下划线。
为什么:last-child没有起作用?

clipboard.png

el:last-child 的匹配规则是:第一步,查找 el 选择器匹配元素的所有同级元素(siblings);第二步,在同级元素中查找最后一个元素;第三步,检验最后一个元素是否与选择器 el 匹配。

.list:last-child 匹配到了 footer,但 footer 不匹配 .list,故选择器不生效。

 

1.可改成.list:nth-last-child(2)

2. 把所有.list标签用div包起来,保证最后一个子元素为.list

3.div .list:first-of-type{font-weight:blod}

这时候调试下就没问题了。
这里我们要理解下:first-child和:first-of-type 区别:
:first-child  指的是父元素的第一个子元素,例如我们本例子中要使用first-child实现的话,必须把h1标签去掉保证没有兄弟元素,或者单独把P标签包围起来;

:first-of-type 指的是父元素下相同类型子元素中的第一个,比如我们例子中的第一个p标签。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM