HTML CSS有序列表自定义计数异常，ol的start属性失效问题求助

嘿，我来帮你搞定这个问题！你用CSS自定义的多级有序列表样式看起来挺不错，但为啥带start="12"属性的<ol>还是从1开始计数呢？我给你拆解一下原因和解决办法：

问题根源 #

问题出在你CSS里的这一行：

ol { counter-reset: item !important; }

你用!important强制把计数器item的初始值重置成了默认的0，完全忽略了原生<ol>标签的start属性。原生的start属性本来是用来指定列表起始数字的，但你的自定义计数器根本没有读取这个属性的值——不管你给start设多少，计数器都会从0开始，每次counter-increment后就变成1，自然就从1开始显示了。

解决办法 #

我们需要让自定义计数器能获取到start属性的值，调整计数器的初始值（因为counter-increment是在生成内容前递增，所以初始值要设为start值-1，这样递增后正好是我们想要的起始数字）。

方法1：利用CSS attr()函数（简洁但需注意兼容性） #

修改后的CSS：

ol { 
  counter-reset: item calc(attr(start number, 1) - 1) !important; 
}
li { display: block !important; }
li:before { 
  content: counters(item, ".") " " !important; 
  counter-increment: item !important; 
}

这里attr(start number, 1)的作用是：

• 获取<ol>标签的start属性值
• 把它转换成数字类型
• 如果没有start属性，就默认用1
  然后用calc()计算出计数器的初始值（start值-1），这样counter-increment后就会从指定的数字开始计数了。

方法2：使用CSS变量（兼容性更好） #

如果担心部分浏览器对attr()的数字类型支持不够，也可以用CSS变量来传递起始值：
先修改CSS：

ol { 
  counter-reset: item calc(var(--start, 1) - 1) !important; 
}
li { display: block !important; }
li:before { 
  content: counters(item, ".") " " !important; 
  counter-increment: item !important; 
}

然后在HTML的<ol>标签里通过内联样式设置变量：

<ol style="--start: 12">
  <li>It must start from 12 not 1</li>
</ol>

这样同样能让列表从12开始计数，而且兼容性更广泛。

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