css中的nth-child和nth-of-type用于选择父元素下第n个子元素,但是对于他们的理解却不够深入,所以通过这个下面的示例详细展示一下他们的效果。 一、准备页面 1<!DOCTYPE html>2345678Document910.node,11.status{12width:50px;13height:20px;14line-height:20px;15text-align:center;16margin-left:20px;17...
:nth-of-type(n)选择器实例代码 如下实例代码,通过类class属性值为c的选择器匹配选择元素,这些元素指向的父元素为一个div元素,然后通过:nth-of-type(1)选择器选择该div中第一个类型class为c的子元素,因为下方实例中,class为c的div和class为c的段落p都是各自div和p元素集合中的第一个元素,因此都会被选择: ...
:nth-of-type(n)选择器实例代码 如下实例代码,通过类class属性值为c的选择器匹配选择元素,这些元素指向的父元素为一个div元素,然后通过:nth-of-type(1)选择器选择该div中第一个类型class为c的子元素,因为下方实例中,class为c的div和class为c的段落p都是各自div和p元素集合中的第一个元素,因此都会被选择: 代...
:nth-last-of-type(n):选择指定元素的兄弟元素中第n个该元素,从最后一个兄弟元素的该元素计数 :nth-of-type(n)和:nth-last-of-type(n)像是:first-of-type和:last-of-type的拓展版,它可以选择指定元素的兄弟元素中,同为该元素的第n个: 例如: 即使div的兄弟元素的第一个是p元素,div:nth-of-type(1)...
ele:nth-child(n) 选取父元素的第 N 个子元素,不论元素的类型。n 可以是数字(从 1 开始),关键词(even/odd),或者公式(3n + 1, 2n + 1...) 元素的选取方式和过程: 选取ele 的父元素的所有一级子元素 => 集合 P(不分类型,若有多个 ele,则分别选取,最终生成多个集合) ...
nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。 nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。 n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。 nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素...
(n)中的n如果有运算,n必须放在前面,n从0开始递增,()内运算结果大于元素个数,运算自动停止。 选择1~9如下: li:nth-of-type(-n+9) {background:red} 选择9~最后如下: li:nth-of-type(n+9) {background:red} 选择倒数2个如下: li:nth-last-of-type(-n+2) {background:red} nth-child也是同样...
jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子...
nth-of-type是css3的⼀个结构性伪类选择器，很多⼈都知道nth-of-type(n)⽤于匹配⽗元素下使⽤同种标签的第n项⼦元素，但是也有不少⼈对这个选择器存在着⼀些误解。如果采⽤标签+nth-of-type(1)的写法，他就会寻找⽗标签下第⼀个该标签，如果是类名+nth-of-type(1)的写法，就相当于给...
1.nth-child：按照个数来算。 nth-of-type：按照类型来计算，如果是class那么碰到不同类型的，单独⼀类，符合条件的选中。 2.在不指定类型时，nth-child(n)选中的是⽗元素下的第N个⼦元素。nth-of-type(n)选中的是⽗元素下的不同类型标签的第N 个。 3.ele:nth-child(n)要求不仅...