我希望 Select 列表中匹配nth-child(2n)的所有元素,但第一个匹配的元素除外;例如...

li:nth-child(2n) {
  background: red;
}

li:nth-child(2) {
  background: none;
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>

这样做的结果是,只有4、6、8和10的背景 colored颜色 是红色.

不过,我想知道是否有更好的方式来表达CSS规则,以及是否可以将其表达为单一规则:

li:nth-child(2n) {
    background: red;
}

li:nth-child(2) {
    background: none;
}

这两种方式结合在一起,还能保持原样吗?

推荐答案

您可以使用:not() pseudo-class来排除第二个第n个子对象.

li:nth-child(2n):not(:nth-child(2)) {
  background: red;
}

一个更好的方法是使用An+B syntax for :nth-child()来 Select 从第四个子元素开始的每两个子元素.

li:nth-child(2n+4) {
  background: red;
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>

Html相关问答推荐

弹性项在主轴方向溢出

为什么在这种情况下是弹性基础:自动不解决内容的大小?

我需要主页按钮出现在中间

Angular 分量被循环

为所有必填字段添加所需的占位符文本(Angular Material)

如何使用CSS创建文件夹选项卡的形状?

如何使不断增长的div不溢出其包含固定div的父级

如何从多个TO中获取一个范围标记以溢出其父标记

获取标准的Python脚本,以便使用FASK对网站进行Flask

如何制作';在第';页中搜索;是否发现多个元素中的单词?

如何在CSS中延迟触发2个转换?

如何使用css在响应图像后面添加形状?

rvest: Select 不包含链接的段落(<;p>;)

如何在悬停时更改同级元素 CSS

标题在实时网站上闪烁

为什么 CSS 网格超出了父级?

如何从 div 内的属性中提取 href 和文本

CSS 随着内容宽度的增加而减少填充