.main > aside > dl > dd:nth-child(1)

来源:2-5 编程练习

RahodJoe

2019-09-10 12:16:59

.main > aside > dl > dd:nth-child(1)可以替代first-type 这个吗?

写回答

1回答

好帮手慕夭夭

2019-09-10

你好同学,是说的first-of-type吧! 因为没有你的代码,所以在你的代码中不知道可不可以代替。需要具体情况具体分析,某一些情况下是不可以的,如下:

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

:nth-child(1)在匹配下标的时候是不论元素类型的,也就是说,nth-child(1)在寻找计算下标的时候,会把p的其他类型的兄弟元素都算在内。h1下标为1 ,nth-child(1)匹配的就是h1 。

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

但是 :nth-child(1)前面规定了p , p:nth-child(1)选择下标为1的元素,并且这个元素为p 。没有符合的元素,所以没有选择任何元素。

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

假如代码中,p的兄弟元素没有其他类型的元素,是可以通过 p:nth-child(1)选择的:

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

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

而p:first-of-type,在计算下标的时候,只会从第一个p元素开始,所以不管有没有h1 ,它都会选择第一个p元素。

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

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

所以你的代码,如果选择的元素没有其他类型的兄弟元素, 那么:first-of-type和:nth-child(1)使用哪一个都可以,如果有其他类型的元素,那么就需要根据老师上面讲解的注意一下哦。

祝学习愉快,望采纳。

1

0 学习 · 40143 问题

查看课程