HTML有序列表value属性设置非整数索引的技术问询

哈哈，这个坑我踩过！原生HTML的有序列表确实不支持非整数的value属性——浏览器会直接把非整数值转成整数处理，所以你写value="6.5"，页面只会显示6。不过别担心，咱们用CSS就能轻松实现这种非整数的列表标记，给你两种实用的方案：

方法一：用CSS伪元素+计数器实现自动衔接的编号 #

这种方法既保留了列表自动计数的便利性，又能灵活插入非整数编号，布局也更规整：

<style>
  /* 自定义有序列表容器 */
  .custom-numbered-list {
    list-style: none; /* 隐藏原生的列表标记 */
    counter-reset: list-counter 0; /* 初始化计数器，从0开始 */
    padding-left: 0;
  }

  /* 通用列表项样式 */
  .custom-numbered-list li {
    position: relative;
    padding-left: 2em; /* 给自定义标记留出空间 */
    margin-bottom: 0.5em;
  }

  /* 生成默认的整数编号 */
  .custom-numbered-list li::before {
    content: counter(list-counter) ".";
    counter-increment: list-counter; /* 每次递增1 */
    position: absolute;
    left: 0;
    color: inherit;
    font-weight: normal;
  }

  /* 针对需要显示6.5的特殊项 */
  .custom-numbered-list li.half-index::before {
    content: "6.5."; /* 直接指定非整数标记 */
    counter-reset: list-counter 7; /* 重置计数器，让下一项从7开始 */
  }
</style>

<!-- 实际使用的列表 -->
<ol class="custom-numbered-list">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
  <li>第五项</li>
  <li class="half-index">这一项需要显示6.5的索引</li>
  <li>下一项自动显示7</li>
  <li>再下一项自动显示8</li>
</ol>

原理很简单：先隐藏原生列表标记，用CSS计数器生成默认的整数编号；然后给需要特殊索引的列表项加个类，直接在伪元素里写死6.5.，同时重置计数器让后续项继续从7开始自动计数，完美衔接。

方法二：手动用内联元素模拟特殊标记 #

如果你的列表不需要自动计数，或者只有极少数特殊项，这种方法更直接粗暴：

<style>
  .manual-numbered-list {
    list-style: none;
    padding-left: 0;
  }

  .manual-numbered-list li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 0.5em;
  }

  .list-number {
    position: absolute;
    left: 0;
  }
</style>

<ol class="manual-numbered-list">
  <li><span class="list-number">1.</span> 第一项</li>
  <li><span class="list-number">2.</span> 第二项</li>
  <li><span class="list-number">3.</span> 第三项</li>
  <li><span class="list-number">6.5.</span> 特殊项</li>
  <li><span class="list-number">7.</span> 下一项</li>
</ol>

这种方法就是把每个列表项的编号都用span手动写出来，虽然少了自动计数的便利胜在直观，适合简单场景。

最后再啰嗦一句：为什么原生value属性不行？因为HTML规范里明确规定了<li>的value必须是整数类型，浏览器会强制将非整数值截断为整数（比如6.5会被转成6），所以想实现非整数索引只能靠CSS自定义啦！

内容的提问来源于stack exchange，提问作者Green Cloak Guy