老师,问一下nth-child选择器和first-of-type选择器有什么区别

老师,问一下nth-child选择器和first-of-type选择器有什么区别

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕夭夭 2020-07-11 11:25:46

同学你好,可以参考如下例子,区分它们:

http://img1.sycdn.imooc.com//climg/5f0930c7097eefe901270091.jpg

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

http://img1.sycdn.imooc.com//climg/5f0930e509a6f39a01440059.jpg

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

http://img1.sycdn.imooc.com//climg/5f0930fd0906c08000770202.jpg

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

http://img1.sycdn.imooc.com//climg/5f09310b0996a61900680204.jpg

总结一下,它们的区别就是:nth-child()是不论元素类型,而:first-of-type是指定的元素类型。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师