定义区别 定义:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. (n 可以是数字、关键词或公式) 区别 nth-child()与nth-of-type()区别 首先需要注意的是,css中根本没有 nth-of-child()的写法,本...
区别:两种匹配的元素不同,“:nth-of-type(n)”选择器是匹配属于父元素的特定类型的第N个子元素,元素类型是有限制的;而“:nth-child(n)”选择器是匹配属于其父元素的第N个子元素,元素类型是没有限制的。 1、:nth-child() 选择器 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型...
1.nth-child:按照个数来算。 nth-of-type:按照类型来计算,如果是class那么碰到不同类型的,单独一类,符合条件的选中。 2.在不指定类型时,nth-child(n)选中的是父元素下的第N个子元素。nth-of-type(n)选中的是父元素下的不同类型标签的第N个。 3.ele:nth-child(n)要求不仅仅是第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 1.1 说明 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。 注意:如果第 N...
:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。 :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。 看概念,挺好理解,可是,每次实际使用的时候,就总是莫名其妙选不到想要的元素,于是我测试了各种例子,决定彻底搞清楚这两个概念。
nth-child,nth-of-type,first-of-type,last-of-type,nth-last-of-type,only-of-type等的区别 二者还是有区别的。 可以简单的理解为,nth-child选择:更强调子元素(child),首先选择父元素第2个子元素 然后判断是否是p元素。 nth-of-type选择:更强调类型(type),首先是p类型,然后从中选第2个元素。 nth-last...
一、nth-child 和 nth-of-type 选择第几个元素可以想到nth-child和nth-of-type。 这两个的区别是,nth-child代表的是第几个子元素,而nth-of-type代表的是该标签类型的第几个元素。 直接看例子吧 :nth-child(2){ color: red } 选中第2个元素 image.png 然后是nth-of-type :nth-of-type(2){ color:...
:nth-child 不区分子元素的类型，而 :nth-of-type 则区分子元素的类型。比如说 div :nth-child(odd) {background:red}div :nth-child(even) {background:blue}第1行第2行第3行第4行第5行第6行第7行结果是：第1行红色 第2行蓝色 第3行红色 第4行蓝色 第5行红色 第6行蓝色 第7行红色...