:nth-child 和 :nth-of-type 都是 CSS3 伪类选择器,用于选择父元素的子元素。它们看起来很相似,但选择目标的方式略有不同,这导致了它们在特定场景下的应用差异。 :nth-child(n) 基于元素在父元素中的位置选择元素。 计数包含所有类型的子元素,包括元素节点、文本节点、
p:nth-child(2) { color: red; } p:nth-of-type(2) { color: red; } 这时候两个选择器所渲染的结果就不一样了。 p:nth-child(2)悲剧了,其渲染的结果不是第二个p标签文字变红,而是第一个p标签,也就是父标签的第二个子元素。如下效果截图: 您可以狠狠地点击这里::nth-child测试demo2 p:nth-of...
区别:两种匹配的元素不同,“:nth-of-type(n)”选择器是匹配属于父元素的特定类型的第N个子元素,元素类型是有限制的;而“:nth-child(n)”选择器是匹配属于其父元素的第N个子元素,元素类型是没有限制的。 1、:nth-child() 选择器 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型...
二者还是有区别的。可以简单的理解为,nth-child选择:更强调子元素(child),首先选择父元素第2个子元素然后判断是否是p元素。nth-of-type选择:更强调类型(type),首先是p类型,然后从中选第2个元素。nth-last-child和nth-last-of-type,与上面类似。 only-child与only-of-type:选取属于其父元素的特定类型唯一子元素...
2.CSS新增:一属性选择器;二结构伪类选择器(①ul li:nth-child(n/偶even/奇odd;②nth-child和nth-of-type的区别)三:权重,四伪元素选择器:content 目录 一:属性选择器: 二:结构伪类选择器: ①偶数ul li:nth-child(even) , 奇数ul li:nth-child(odd) ,特定ul li:nth-child(n) ②nth-child和nth-of...
首先上概念 :nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。看概念,...
一、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?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素, 而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。 这里附上一个小例子: ...
nth-of-type和nth-child都是css3中的伪类选择器,其功能也都是选取父元素下的直接子元素,那么他们的区别在哪里呢? 其实他们的区别就在type和child上。 nth-of-type的关键词是type,即他关心的是类型。它不会对所有子元素生效,只会对子元素中符合选择器要求的类型的子元素进行筛选,而忽略非选择器要求的类型的子...
首先,nth-child和nth-of-type这两个选择器都是用于匹配同一父元素下的子元素。它们的不同之处在于选择标准的范围。当使用nth-child时,CSS 会根据元素在父元素中的位置来选择,而nth-of-type则是根据同一种类型的元素进行选择。具体来说,nth-child(n)会匹配父元素的第 n 个子元素,无论该元素的类型如何。而nth...