(2)若classA的父元素的子元素的classA用于不同类型的元素节点 classA:nth-of-type(n) classA的父元素的子元素中,每种类型的元素节点中第n个classA匹配(不一定是classA的父元素的第n个子元素,也不一定是只有一个) classA:nth-child(n) classA元素的父元素的第n个子元素且是classA元素才匹配 p{color:b...
CSS3 :nth-of-type() Selector 完整CSS选择器参考手册 实例 指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色: p:nth-of-type(2) { background:#ff0000; } 尝试一下 » 定义和用法 :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如父元素有3个子元素,分别是p、span和p,那么:nth-of-type(2)选择到的是第...
nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。 nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。 n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。 nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素...
nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。 nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。 n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。 nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素...
具体来说,nth-child(n)会匹配父元素的第 n 个子元素,无论该元素的类型如何。而nth-of-type(n)则只会匹配同类型(如 div、p、span 等)的第 n 个元素。了解这一点为我们在实际应用中区分这两个选择器提供了重要的基础。 接下来,使用这两个选择器实现特定的样式,我们来看一个实例。在 HTML 中,假设我们...
nth-of-type(n)—— 寻找同一类型元素里的第n个元素 看这个定义也许还不是很清楚他们的区别,我们一点点来区分。 p:nth-child(2) 与 p:nth-pf-type(2) HTML代码如下 pgh1 pgh2 pgh3 pgh4 div1 div2 div3 div4 分别应用两个样式, 都是找第...
由此可知,nth-child和nth-of-type的区别就是nth-child只选择父级元素下的第几个子元素,不会对子元素的标签进行区分,如选择的条件是n+2,从父级元素第二个子元素开始选择,当第二个元素是p标签则进行选择,如果不是则跳过,如: 而nth-of-type会选择标签的第几个元素,如,p:nth-of-type(n+2),就是读取父级...
jQuery :nth-of-type() 选择器 :nth-of-type()是jQuery内置的一个选择器,用于选择所有指定父元素的第n个子元素。 语法: parent_name : nth-of-type(n|even|odd|algebraic equation) 参数:它需要一个参数n|even|odd|代数方程。 Value 说明 n 选择存
CSS3 nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-...