CSS选择器中序号选择器问题?

来源:1-1 课程简介

慕沐8324510

2021-07-26 23:10:18

http://img.mukewang.com/climg/5f5360bf09873b3405540724.jpg

老师好!!

这段代码为什么不是家用电器和清洁用品都变成红色呢?外面的两<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 这个选择器的条件:

http://img.mukewang.com/climg/60ff686e095bbe0b07530472.jpg

所以第一个li内的所有文字,都是红色。

而标号为2、3的li元素,不是ul的第一个子元素,所以选不中。

2、li除了在ul中外,还在ol中。而 li:first-child 这个选择器并没有指定是哪里的li,所以还要继续判断,ol中的li是否有满足条件的:

http://img.mukewang.com/climg/60ff699a092b4a1105960351.jpg

对于ol中的li,只有“洗衣液”满足,所以它也是红色。

补充说明:

​于first-child 是选中第一个子元素,可以理解成选中“老大”:

http://img.mukewang.com/climg/60ff6a2109aca68c06480357.jpg

同学再理解一下。

祝学习愉快!

1

0 学习 · 15276 问题

查看课程