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)选择到的是第...
(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(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-...
nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。 nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。 n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。 nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素...
nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如父元素有3个子元素,分别是p、span和p,那么:nth-of-type(2)选择到的是第二个p元素,而不是第二...
div p:nth-child(n) :找到div元素下面的第n个子元素 并且此元素类型为p 如果类型不是p则无效 div p:nth-of-type(n) :找到div元素下面的第n个p元素 (无论第一个p元素之前有多少个兄弟元素 此选择器只会从第一个p元素开始查找 应用场景:在一个大父元素中有很多子元素 但是只需要对第n个p元素进行选择...
nth-of-type(n)—— 寻找同一类型元素里的第n个元素 看这个定义也许还不是很清楚他们的区别,我们一点点来区分。 p:nth-child(2) 与 p:nth-pf-type(2) HTML代码如下 pgh1 pgh2 pgh3 pgh4 div1 div2 div3 div4 分别应用两个样式, 都是找第...
1 :nth-of-type(n) 是选择父元素的第n个同类型的子元素。 比如: .box>.item:nth-of-type(n) 选出的元素具有.item 并且在所有的.item兄弟元素中是第n位 2 :nth-child(n) 是选择父元素的第n个子元素 比如: .box>.item:nth-child(n) 选出的元素具有.item,并且在所有的兄弟元素中是第n位...
由此可知,nth-child和nth-of-type的区别就是nth-child只选择父级元素下的第几个子元素,不会对子元素的标签进行区分,如选择的条件是n+2,从父级元素第二个子元素开始选择,当第二个元素是p标签则进行选择,如果不是则跳过,如: 而nth-of-type会选择标签的第几个元素,如,p:nth-of-type(n+2),就是读取父级...