一、nth-child() 1. nth-child(n):父元素下的第n个子元素,n>0,索引从1开始。不区分子元素类型。 2. nth-child(odd):父元素下的奇数子元素,等同于:nth-child(2n-1)。区分子元素类型。 3. ntn-child(even):父元素下的偶数子元素,等同于:nth-child(2n)。区分子元素类型。 4. nth-child(an+b):...
在上面的例子中,:nth-child(n+2)(或:nth-of-type(n+2))选择器会匹配父元素下的第二个及之后的所有子元素(或同类型子元素)。这里的n从1开始计数,n+2则表示从第二个元素开始匹配。因此,这段代码会给列表中的第二个、第三个、第四个...等所有列表项设置浅灰色的背景色,而第一个列表项则不受影响。
1.我对 :nth-child的理解 利用该选择器我们可以轻松的修改特定标签的样式 2. :nth-child的用法 (1)选取第几个标签,这里的数字可以是我们想要的,如下面选取对应的第二个P标签 p:nth-child(2){color:red;} (2)选取大于等于2的标签,n表示整数,整数代表大于等于,负数代表小于等于,如下面所示 p:nth-child(n...
:nth-child(odd)//奇数:nth-child(even)//偶数:nth-child(1)//第一个 :nth-child(an + b)。a表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。 :nth-child(3n+1)// 第1、4、7、... :nth-child(n + b) 大于b的 :nth-child(-n + b) 小于b的 取区间值 :nth-child(n+a):nth-...
:nth-child() :nth-child() 选择器,该选择器选取父元素的第 N 个子元素,与类型无关。 一、偶数:nth-child(2n) 二、奇数 :nth-child(2n-1) 三、第6个开始的,直到最后:nth-child(n+6) 四、选择第1个到第6个 :nth-child(-n+6) 五、两者结合使用,可以限制选择某一个范围,选择第6个到第9个 :...
nth-child介绍 nth-child(n) 选择器匹配属于其父元素的第 n 个子元素。 使用它的时候需要注意几点: 第n个子元素的计数是从1开始,不是从0开始的 选择表达式中的字母n代表≥0的整数 它有3种常见用法 直接指明n的值:span:nth-child(1) 用even/odd分别代表偶数 / 奇数:span:nth-child(even) ...
// 选取第3个元素 【从第一个开始,非数组从第0开始】 ul.container li:nth-child(3) { // todo } x < 0 选择的是大于0 、小于等于y的标签 负方向选取 x = 1 选择的大于等于y的标签 li:nth-child(n+6) { background-color: #298EB2; box-shadow: inset -3px -3px 10px rgba(0, 0, 0...
:nth-child(2n-1)选取奇数标签,2n-1可以是odd 点此查看实例展示 .demo01 li:nth-child(2n-1){background:#090} :nth-child(3n+1)自定义选取标签,3n+1表示“隔二取一” 点此查看实例展示 .demo01 li:nth-child(3n+1){background:#090}
使用CSS选择器:nth-child()，能轻松修改特定子元素的样式。该选择器不考虑子元素的类型，直接选取父元素的第N个子元素。要修改父元素的前三个子元素的样式？简单，使用:nth-child(1n)即可。若需选择列表中的偶数标签，可以使用:nth-child(2n)；而要选择奇数标签，则是:nth-child(2n-1)。若需从第...
一、nth-child 和 nth-of-type 选择第几个元素可以想到nth-child和nth-of-type。 这两个的区别是,nth-child代表的是第几个子元素,而nth-of-type代表的是该标签类型的第几个元素。 直接看例子吧 :nth-child(2){color:red} 选中第2个元素 image.png ...