如何用CSS实现层级有序列表：1、1.1、(a)、(i)格式？

完全可行，不用依赖HTML的type属性，纯CSS就能实现你要的效果。以下是基于Jakub Jirutka方案修改的具体规则：

核心CSS代码 #

/* 基础有序列表样式，隐藏默认编号 */
ol {
  list-style: none;
  counter-reset: list-counter;
  padding-left: 2em;
}

/* 第一层编号：1、2、3... */
ol > li::before {
  counter-increment: list-counter;
  content: counter(list-counter) "、";
  position: absolute;
  left: 0;
}

ol > li {
  position: relative;
}

/* 第二层编号：1.1、1.2... */
ol ol {
  counter-reset: sublist-counter;
  padding-left: 2.5em;
}

ol ol > li::before {
  counter-increment: sublist-counter;
  content: counter(list-counter) "." counter(sublist-counter) "、";
}

/* 第三层编号：(a)、(b)... */
ol ol ol {
  counter-reset: alpha-counter;
  padding-left: 2.5em;
}

ol ol ol > li::before {
  counter-increment: alpha-counter;
  content: "(" counter(alpha-counter, lower-alpha) ")";
}

/* 第四层编号：(i)、(ii)... */
ol ol ol ol {
  counter-reset: roman-counter;
  padding-left: 2.5em;
}

ol ol ol ol > li::before {
  counter-increment: roman-counter;
  content: "(" counter(roman-counter, lower-roman) ")";
}

关键说明 #

• 每层通过counter-reset重置对应计数器，counter-increment实现编号递增
• 第三层用lower-alpha格式配合圆括号包裹，第四层用lower-roman格式
• 调整padding-left值可控制层级缩进，优化整体对齐效果
• 无需在HTML中添加type属性，保持结构简洁

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