:nth-of-type :nth-child 说明:.type:nth-child(1)匹配的是type的父元素的子元素中第一个子元素且class是type的h1元素,.type:nth-of-type(1)匹配的是type的父元素的子元素中h1和p元素的第一个class是type的元素,即0和1。 总结: classA:nth-of-type(n) 匹配的是父元素的子元素中,每种类型的元素节点...
因为nth-of-type他是当前元素的兄弟元素的第n个,而nth-child是当前元素的兄弟节点的第n个当前元素,所以p:nth-of-type(4)是第四个p元素,只能是p元素的第四个,即 当前元素:nth-of-type无论中间加入什么元素,都只能是当前元素的第n个,而p:nth-child(4)是取第四个兄弟节点的p元素,所以我们发现第三个p被p...
面试必考:nth-child与nth-of-type的区别,本视频由某人不平凡提供,0次播放,好看视频是由百度团队打造的集内涵和颜值于一身的专业短视频聚合平台
区别:两种匹配的元素不同,“:nth-of-type(n)”选择器是匹配属于父元素的特定类型的第N个子元素,元素类型是有限制的;而“:nth-child(n)”选择器是匹配属于其父元素的第N个子元素,元素类型是没有限制的。 1、:nth-child() 选择器 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型...
参考nth-of-type()和nth-child()的区别 一. nth-of-type() nth-of-type(m)选择器匹配属于父元素的特定类型的第m个子元素的每个元素。 注意: 这里是指定其特定类型的元素,不是任何类型 示例: 111111第一段落222222第二段落333333第三段落css 这里指定是 p 标签的第三个.nth p:nth-of-type(3){backgrou...
因为nth-of-type他是当前元素的兄弟元素的第n个,而nth-child是当前元素的兄弟节点的第n个当前元素,所以p:nth-of-type(4)是第四个p元素,只能是p元素的第四个,即 当前元素:nth-of-type无论中间加入什么元素,都只能是当前元素的第n个,而p:nth-child(4)是取第四个兄弟节点的p元素,所以我们发现第三个p被...
nth-of-type和nth-child都是css3中的伪类选择器,其功能也都是选取父元素下的直接子元素,那么他们的区别在哪里呢? 其实他们的区别就在type和child上。 nth-of-type的关键词是type,即他关心的是类型。它不会对所有子元素生效,只会对子元素中符合选择器要求的类型的子元素进行筛选,而忽略非选择器要求的类型的子...
nth-child()与nth-of-type()区别 首先需要注意的是,css中根本没有nth-of-child()的写法,本人有时会写成这种形式,导致效果出不来。 其次,不管是nth-child(n),还是nth-of-type(n),两者()中的...是你想找谁,是div,还是h3,或者是p),二:这个孩子在家排行第几(不管他前面的兄弟是什么类型的元素,依次排下...
一、nth-child 和 nth-of-type 选择第几个元素可以想到nth-child和nth-of-type。 这两个的区别是,nth-child代表的是第几个子元素,而nth-of-type代表的是该标签类型的第几个元素。 直接看例子吧 :nth-child(2){color:red} 选中第2个元素 image.png ...