li:nth-child(n+4){color:pink} 7. 选择从第一个到第四个 这里的数字4也是可以根据你的需要替换的。 li:nth-child(-n+4){color:pink} 8.nth-last-child(3) 表示最后三个标签 li:nth-last-child(3){color:pink} 9.nth-last-child(3n) 表示3的倍数3.6.9…… li:nth-last-child(3n){color:pin...
:nth-last-child()选择器允许你基于元素的兄弟元素总数来选择元素,从最后一个元素开始计数。在这个场景中,我们需要选择最后三个元素,因此需要分别使用:nth-last-child(1)、:nth-last-child(2)和:nth-last-child(3)。 编写CSS规则: 为这三个选择器编写一个CSS规则,以应用相同的样式。 下面是一个具体的示例代...
一、选择列表中的偶数标签: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-last-chil...
: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(n+6)...
1、first-child、last-child、nth-child(n)、nth-child(2n)、nth-child(2n-1)、nth-child(odd)、nth-child(even)、nth-last-child(3)(倒数第三个) 注意点: 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 1、先找到该伪类调用者(元素)的父类 ...
1、first-child、last-child、nth-child(n)、nth-child(2n)、nth-child(2n-1)、nth-child(odd)、nth-child(even)、nth-last-child(3)(倒数第三个) 注意点: 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 1、先找到该伪类调用者(元素)的父类 ...
选择第N个LI 代码语言:javascript 复制 ul.list li:nth-child(3){background:#000;} 如上面的CSS所示,如果要选择第三个,就写3即可. 这是最简单的.我们可以使用这种方法,给不同的li加上不同的样式,如果你有需要,都可以分别订制的. 如果是第一个,或者最后一个,写法还可以更改为 ...
选择最后一个元素 li:last-child { color: green; } 选择倒数第二个 li:nth-last-child(2){ color: green; } 从这个例子可看出,上面那个例子也有第二种实现方法。 浏览器支持 有趣的是,:first-child 和:last-child被IE 7支持,但是知道IE9才支持剩下的选择器。如果你担心IE,可以使用Selectivizr。如果你...
当然可以。在CSS中,nth-child选择器可以帮助您选择列表中的特定项。要选择列表中的最后2项,您可以使用:nth-last-child()或:nth-last-of-type()选择器。以下是如何使用这些选择器的示例: 使用:nth-last-child()选择器: 代码语言:css 复制 li:nth-last-child(-n+2){/* 在此处添加您的样式 */} ...
li:nth-child(-n+9) { background: #ff0000; border-bottom: 1px; } 7、前后限制范围,选择第6个到第9个 li:nth-child(n+6):nth-child(-n+9) { background: #ff0000; border-bottom: 1px; } ... 8、范围高级用法:选中的子元素是从第2位到第9位,并且只包含奇数位。 li: ...