如何用CSS全局修改有序列表（含嵌套）编号为括号替代句号？

完全可以实现，利用CSS的::marker伪元素就能全局修改所有有序列表（包括嵌套子列表）的标记样式，替换默认的句号为括号。最新版Chrome完全支持这个特性。

解决方案代码 #

/* 全局修改所有有序列表的标记样式 */
ol li::marker {
  content: "(" counter(list-item) ") ";
}

完整示例（HTML+CSS） #

<style>
ol li::marker {
  content: "(" counter(list-item) ") ";
}
</style>

<ol type="1">
    <li>Main list number one.</li>
    <li>Main list number two.</li>
        <ol type="a">
            <li>Sublist first.</li>
            <li>Sublist second.</li>
        </ol>
    <li>Main list number three.</li>
</ol>
<ol type='I'>
    <li>Upper roman list one.</li>
    <li>Upper roman list two.</li>
</ol>

效果说明 #

• counter(list-item)会自动继承父<ol>元素type属性对应的计数样式：
  • type="1"时显示数字（1、2、3...）
  • type="a"时显示小写字母（a、b、c...）
  • type="I"时显示大写罗马数字（I、II、III...）
• 通过content属性将计数器值包裹在括号中，替换默认的句号，同时保留原有的嵌套缩进逻辑。

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