CSS中是否有快捷写法同时设置第1、3个子元素的颜色样式？

云上老周

2026-8-26

问题场景

现有如下HTML列表结构：

<ul>
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3
        <ol>This is another list 1</ol>
        <ol>This is another list 2</ol>
        <ol>This is another list 3</ol>
        <ol>This is another list 4</ol>
    </li>
</ul>

初始CSS样式如下：

ul li{
    background-color: violet;
}

ul li ol:nth-child(3){
    background-color:aquamarine;
}

需求：无需单独新增针对ul li ol:nth-child(1)的独立CSS规则，通过更简便的写法同时为第1个和第3个ol子元素设置背景色。

解决方案

有两种成熟的简便写法，可根据实际业务场景选择：

通用稳妥写法（推荐）
利用CSS选择器分组规则，将多个需要匹配的选择器用英文逗号分隔，多个选择器可共用同一套样式声明，完全不需要重复写属性，也不会出现意外匹配：
```
ul li{
    background-color: violet;
}

ul li ol:nth-child(1),
ul li ol:nth-child(3){
    background-color:aquamarine;
}
```
这种写法兼容性覆盖所有主流浏览器，不管后续li标签内是否插入其他类型的同级元素，都能精准匹配指定的第1、3个ol元素，没有副作用。
固定结构下的极简写法
如果确定当前li标签下的ol元素之间不会插入其他任何标签元素，也可以用奇偶匹配伪类简化代码：
```
ul li{
    background-color: violet;
}

ul li ol:nth-child(odd){
    background-color:aquamarine;
}
```
注意：nth-child(odd)的匹配逻辑是选中父元素下所有子元素序号为奇数的ol，一旦在ol之间插入其他标签（如span、p标签等），会改变子元素计数顺序，导致匹配结果不符合预期，仅适合DOM结构完全固定的场景使用。