嵌套列表CSS样式优化：如何避免冗余选择器？

你提到的这个冗余问题确实很头疼，尤其是嵌套层级多的时候，要写全ul和ol的所有组合简直是噩梦。这里有两种实用的解决思路：

1. 使用CSS :is() 选择器（纯CSS，无需修改HTML） #

这是最推荐的方案，现在主流浏览器都支持它。:is()可以接受多个选择器作为参数，匹配其中任意一个元素。针对第三层嵌套列表，只需要一行代码就能覆盖所有组合：

:is(ul, ol) :is(ul, ol) :is(ul, ol) {
  /* 你的样式规则 */
}

如果要设置第四层及更深的嵌套，只需要继续追加:is(ul, ol)即可，比如第四层的写法是：

:is(ul, ol) :is(ul, ol) :is(ul, ol) :is(ul, ol) {
  /* 样式规则 */
}

完全不用再枚举所有ul/ol的组合，代码量从指数级增长变成了线性增长。

2. 统一给列表元素加类（需修改HTML） #

如果需要兼容非常老旧的浏览器（比如不支持:is()的IE），可以给所有ul和ol都加上同一个类名，比如.list：

<ul class="list">
  <li>
    <ol class="list">
      <li>
        <ul class="list">
          <!-- 第三层列表内容 -->
        </ul>
      </li>
    </ol>
  </li>
</ul>

然后在CSS里直接用类选择器嵌套：

.list .list .list {
  /* 你的样式规则 */
}

这种方式也能避免枚举组合，唯一缺点是需要改动HTML结构。

另外补充一句：虽然ul和ol的外观可以用CSS修改，但它们的语义差异其实很关键——ul用于无序列的项目集合，ol用于有顺序的序列（比如步骤、排名），这种语义对屏幕阅读器等无障碍工具、搜索引擎理解页面结构都有帮助，这也是HTML至今没有统一成<list>标签的核心原因。

内容的提问来源于stack exchange，提问作者Mentalist