具有多个计数器的 CSS 列表计数不正确答案

【问题标题】：CSS list with multiple counters doesn't count properly具有多个计数器的 CSS 列表计数不正确
【发布时间】：2015-04-02 10:23:48
【问题描述】：

我有一个带有两个不同计数器的<ul>-list：

ul.numbered {
    counter-reset: alphaCounter, numberCounter;
}

ul.numbered li.numbered,
ul.numbered li.lettered {
    padding-left: 1.8em;
}

ul.numbered li.numbered:before {
    position: absolute;
    top: 0;
    left: 0;
    counter-increment: numberCounter;
    content: counter(numberCounter, decimal) ". "; 
}

ul.numbered li.lettered:before {
    position: absolute;
    top: 0;
    left: 0;
    counter-increment: alphaCounter;
    content: counter(alphaCounter, upper-alpha) ". "; 
}

此列表正确计算 li.lettered-items 与 A.、B. 等。但 li.numbered-items 始终以“1.”开头。如果我将计数器重置的顺序切换为counter-reset: numberCounter, alphaCounter;，数字会正确计数，并且字母总是以“A”开头。

根据我阅读的内容，我正确设置了列表，但是，显然不是。有什么帮助吗？

【问题讨论】：

标签： list css-counter

【解决方案1】：

好的，问题是counter-reset 上两个计数器之间的逗号。在这种情况下，重置多个计数器的正确解决方案是：

counter-reset: numberCounter alphaCounter;

W3C, 12.4 Automatic counters and numbering

【讨论】：