first-child不懂

如图所示，我要写成ul li:first-child{background:red;},第一行就变成红色。如果写成ul:first-child{background:red;},第一行就没变化？在这里面，ul不是父元素吗？这”ul:first-child“不是表示它的第一个子元素吗？为什么没作用呢？

天窗的蚂蚁

2016-01-03

源自：十天精通CSS3 6-6

关注问题我要回答

992

操作

收起

3 回答

李晓健回答被采纳 +3 积分
2016-01-03

后代选择器是有空格的 ul li:first-child 拆开来看 ul是选择页面所有的ul标签 ul li是选择ul下面的所有li标签 ul li:first-child是ul中所有li中的第一个，再来看 ul:first-child 一样拆开来看 ul是选择页面所有的ul标签 ul:first-child是选择所有ul中的第一个ul，所以这里选择到的是ul标签而不是li标签。

2 回复有任何疑惑可以回复我~

收起回答

天窗的蚂蚁提问者

<div> 慕课网 慕课网 慕课网 慕课网 慕课网 慕课网 </div> 那这里面，div span:first-child是不是表示div中所有span中的第一个呢？但是这样有不对，得写成div span:nth-child(4)才行。还是有点迷糊

2016-01-03 回复有任何疑惑可以回复我~

李晓健回复天窗的蚂蚁提问者

选择器需要所有条件同时满足才行，div span:first-child 你这个选择器 div span会选中div下所有的span标签，然后你又在span上加了一个first-child 的限制，这些span没有一个中div的第一个子元素，所以就不会选中任何元素了。而div span:nth-child(4) 这个选择器中第一个span即是div的子元素，又是div中的第4个子元素，所以就可以选中了。

2016-01-03 回复有任何疑惑可以回复我~

天窗的蚂蚁提问者

非常感谢！

2016-01-04 回复有任何疑惑可以回复我~