关于nth-of-type(n)

关于nth-of-type(n)

老师关于nth-of-type(n)  我还是不理解

正在回答

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

3回答

你好同学,p:nth-child(2)是在计算位置的时候不指定元素类型。但是选中的还是第二个位置上的p。如果不是p,那么就没有选中任何元素了哦。

建议同学把老师截图的代码实际的测试一下,因为老师直接告诉你结果,同学映像还是不深刻的。把自己的想法都实践到代码上,多练多思考,从效果中能够更好的帮助你总结和理解,并提高自己独立思考与解决问题的能力哦。

祝学习愉快,望采纳。

好帮手慕夭夭 2019-06-24 09:54:07

你好同学,nth-child和nth-of-type() 从定义上看确实是类似的,所以光从概念上理解是很难区分的。要使用代码实际测试一下,观察它们两个设置后的效果有什么区别,这样很容易帮我们去理解哦。如下:

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

效果如下:

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

样式改为如下:

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

效果如下:

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

从如上总结,它们两个都是从兄弟元素中选择指定的元素。而区别是:

nth-child并不指定元素的类型,所以从结构上看,h1也包含其中,属于第一个元素,而第一个p才是第二个元素,所以它会被选中。

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

而:nth-of-type()会指定元素的类型,即p:nth-of-type(2)只能从p的集合中去查找,所以从第一个p开始数,第二个p才会被选中

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

建议跟着老师的代码自己也练习一下哦,祝学习愉快 ,望采纳。


  • 提问者 白羊诗酒纵年华 #1
    老师p:nth-child(2)的话 如果第二个不是p标签那怎么办呢
    2019-06-24 10:26:24
提问者 白羊诗酒纵年华 2019-06-23 21:59:33

老师还有就是 关于nth-of-type(n) 和nth-child的区别 我看了几遍我还以为领悟

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

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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