/* 选择第n个,n位数字 */ :nth-child(n) 选择列表中的偶数标签 :nth-child(2n) 选择列表中的奇数标签 :nth-child(2n-1) 选择前几个元素 /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 从第几个开始选择 /*【正方向范围】选择从第6个开始的,直到最后 */ :nth-child(n+6){}...
2.选择前几个元素 /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 3.从第几个开始选择 /*【正方向范围】选择从第6个开始的 */ :nth-child(n+6){} 4.两者结合使用,可以限制选择某一个范围 /*【限制范围】选择第6个到第9个,取两者的交集【感谢小伙伴的纠正~】 */ :nth-child(-n...
一、两者结合使用,可以限制选择某一个范围,选择第6个到第9个 :nth-child(n+6):nth-child(-n+9)
nth-child(-n+n)nth-child(-n+n):选择第 n 个之前的元素(此处的 n 是后面的那个,下同)。 举例:前三行背景色设置为绿色,代码如下: 代码语言:javascript 复制 li:nth-child(-n+3){background:#2cae1d;} nth-child(n+n)nth-child(n+n):选择第 n 个之后的元素。 举例:第五行及以后背景色设置为...
选择前几个元素 负方向范围】选择第1个到第6个 :nth-child(-n+6){} 从第几个开始选择 【正方向范围】选择从第6个开始的 :nth-child(n+6){} 两者结合使用,可以限制选择某一个范围 【限制范围】选择第6个到第9个,取两者的交集【感谢小伙伴的纠正~】 ...
last-child表示选择列表中的最后一个标签，代码如下：li:last-child{background:#090} 3、nth-child(3)表示选择列表中的第3个标签，代码如下：li:nth-child(3){background:#090} 上面代码中的3也可以改成其它数字，如4、5等。想选择第几个标签，就填写几。**4、nth-child(2n) ** 这个表示选择列表中的...
first-child first-child：选择列表中的第一个标签。nth-child(n)nth-child(n)：选择列表中的第...
7、前后限制范围,选择第6个到第9个 li:nth-child(n+6):nth-child(-n+9) { background: #ff0000; border-bottom: 1px; } ... 8、范围高级用法:选中的子元素是从第2位到第9位,并且只包含奇数位。 li: nth-child(n+2):nth-child(odd):nth-child(-n+9) { back...
first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#fff} last-child用法: 1、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#fff} :nth-child(2)选取第几个标签,“2可以是你想要的数字” ...
last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#090} 3、nth-child(3) 表示选择列表中的第3个标签,代码如下: li:nth-child(3){background:#090} 上面代码中的3也可以改成其它数字,如4、5等。想选择第几个标签,就填写几。