CSS选择器中序号选择器问题?
来源:1-1 课程简介
慕沐8324510
2021-07-26 23:10:18
老师好!!
这段代码为什么不是家用电器和清洁用品都变成红色呢?外面的两<li>它们明明是同级的啊,css是这样写的li:first-child{color:red},这里明明也没有明确定义哪个部分啊,我实在搞不懂。
1回答
好帮手慕久久
2021-07-27
同学你好,解答如下:
1、先看 li:first-child 这个选择器的意思:它是选中li元素,并且li是父元素下的第一个子元素。即要满足两个条件:元素是li,并且是其父元素下的第一个子元素。
对于ul来讲,它里面有3个li,只有第一个li满足 li:first-child 这个选择器的条件:
所以第一个li内的所有文字,都是红色。
而标号为2、3的li元素,不是ul的第一个子元素,所以选不中。
2、li除了在ul中外,还在ol中。而 li:first-child 这个选择器并没有指定是哪里的li,所以还要继续判断,ol中的li是否有满足条件的:
对于ol中的li,只有“洗衣液”满足,所以它也是红色。
补充说明:
于first-child 是选中第一个子元素,可以理解成选中“老大”:
同学再理解一下。
祝学习愉快!
相似问题