在上面的例子中,:nth-child(n+2)(或:nth-of-type(n+2))选择器会匹配父元素下的第二个及之后的所有子元素(或同类型子元素)。这里的n从1开始计数,n+2则表示从第二个元素开始匹配。因此,这段代码会给列表中的第二个、第三个、第四个...等所有列表项设置浅灰色的背景色,而第一个列表项则不受影响。
一、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):...
使用.container:nth-child(n+3)可能有效也可能无效。因为,:nth-child()伪类表示nth匹配选择器的子元素(.container在这种情况下)。 如果.container元素不是第n个孩子其家长,也不会被选中。 从规范: 的:nth-child(an+b)伪级符号代表具有一个元素an+b-1的兄弟姐妹之前它在文档树中,对于任何正整数或零值n,且具...
1.我对 :nth-child的理解 利用该选择器我们可以轻松的修改特定标签的样式 2. :nth-child的用法 (1)选取第几个标签,这里的数字可以是我们想要的,如下面选取对应的第二个P标签 p:nth-child(2){color:red;} (2)选取大于等于2的标签,n表示整数,整数代表大于等于,负数代表小于等于,如下面所示 p:nth-child(n...
:nth-child() 一、偶数:nth-child(2n) 二、奇数 :nth-child(2n-1) 三、第6个开始的,直到最后:nth-child(n+6) 四、选择第1个到第6个 :nth-child(-n+6) 五、两者结合使用,可以限制选择某一个范围,选择第6个到第9个 :nth-child(n+6):nth-child(-n+9) ...
:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素,不论元素的类型。n 可以是数字、关键词或公式。 :nth-child(an + b)。a表示周期的长度,...
使用CSS选择器:nth-child()，能轻松修改特定子元素的样式。该选择器不考虑子元素的类型，直接选取父元素的第N个子元素。要修改父元素的前三个子元素的样式？简单，使用:nth-child(1n)即可。若需选择列表中的偶数标签，可以使用:nth-child(2n)；而要选择奇数标签，则是:nth-child(2n-1)。若需从第...
// 选取第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...
1.1、nth-child(n) 父元素下的第n个子元素，n必须大于0，索引都是从1开始。多云转晴多云转晴多云转晴多云转晴多云转晴 div p:nth-child(2){background: skyblue;} 1.2、nth-child(odd) 父元素下的奇数子元素 等同于 nth-child(2n-1)div p:nth-child(odd){background: skyblue;...
:nth-child(odd) :nth-child(even) 5. 隔选择子元素 选择1,4,7,10 :nth-child(3n+1) 6.范围高级用法 使用nth-child(n+2):nth-child(odd):nth-child(-n+9) 我们将会选中的子元素是从第2位到第9位,并且只包含奇数位。 nth-child(n+2):nth-child(odd):nth-child(-n+9) ...