如何用CSS counter实现表格行3.2、3.3这类小数编号？

你之前的写法错误使用了计数器的第二个参数——这个参数是用来指定计数器的样式类型（比如十进制、小写字母等），不是用来拼接字符串的，所以才会导致编号消失。要实现3.x格式的编号，只需要把固定前缀和计数器值直接拼接即可，同时调整计数器的初始值：

修改后的CSS代码 #

table {
    counter-reset: rowNumber 1; /* 初始值设为1，第一次递增后得到2，对应3.2 */
}

table tr {
    counter-increment: rowNumber; /* 每行计数器+1 */
}

table tr td:first-child::before {
    content: "3." counter(rowNumber); /* 直接拼接固定前缀和计数器值 */
    min-width: 1.5em; /* 适当调整宽度，避免内容挤在一起 */
    margin-right: 0.5em;
}

对应的HTML代码（无需修改） #

<table border="1">
    <tr>
        <td>blue</td>
    </tr>
    <tr>
        <td>red</td>
    </tr>
    <tr>
        <td>black</td>
    </tr>
</table>

说明 #

• 把counter-reset的初始值从3改成1，这样第一行计数器递增后是2，正好对应3.2，后续每行依次+1得到3.3、3.4
• content属性里直接用字符串"3."和counter(rowNumber)拼接，就能得到你想要的编号格式

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