如何自定义列表编号？寻求替代逐个修改li的专业实现方法

你现在逐个修改<li>元素样式的方式确实不够高效，推荐用CSS计数器的统一配置方案，只需要少量代码就能实现自定义编号，新增列表项时也无需修改CSS，可维护性更强。

实现思路 #

• 在列表容器（<ol>）上初始化计数器，指定起始数值或规则；
• 统一给所有列表项（<li>）设置伪元素样式，自动调用计数器并处理递增逻辑；
• 若需自定义单个项的编号，可通过HTML属性传递参数，进一步灵活控制。

代码示例 #

基础版（固定起始值+连续递增）

如果你的编号是从10开始依次+1（10、11、12），可以这样写：

.ul-list {
  display: flex;
  background-color: #eeeeee;
  color: black;
  width: 400px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.ul-list .ol-html {
  margin: 20px;
  list-style-type: none;
  /* 初始化计数器，起始值设为9，第一个li递增后即为10 */
  counter-reset: custom-number 9;
}

/* 统一设置所有li的编号样式 */
.ul-list .ol-html li::before {
  content: counter(custom-number) ".";
  /* 每次递增1 */
  counter-increment: custom-number 1;
  /* 可选：调整编号与文本的间距 */
  margin-right: 8px;
}

<ul class="ul-list">
  <li>
    HTML
    <ol class="ol-html">
      <li>Slim</li>
      <li>Pugjs</li>
      <li>HAML</li>
    </ol>
  </li>
</ul>

灵活版（自定义任意编号）

如果需要给不同项设置非连续的任意编号，可通过data-*属性传递数值，CSS读取属性值生成编号：

.ul-list {
  display: flex;
  background-color: #eeeeee;
  color: black;
  width: 400px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.ul-list .ol-html {
  margin: 20px;
  list-style-type: none;
}

.ul-list .ol-html li::before {
  /* 读取data-number属性的值作为编号 */
  content: attr(data-number) ".";
  margin-right: 8px;
}

<ul class="ul-list">
  <li>
    HTML
    <ol class="ol-html">
      <li data-number="10">Slim</li>
      <li data-number="21">Pugjs</li>
      <li data-number="35">HAML</li>
    </ol>
  </li>
</ul>

优势说明 #

• 无需逐个修改<li>样式，代码更简洁；
• 基础版新增列表项时自动延续编号，灵活版只需添加data-number属性即可；
• 样式逻辑集中在容器和通用选择器上，便于统一调整整体样式。

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