CSS 包含多个计数器的列表计数不正确

Question

我有一个 <ul>-列表，其中包含两个不同的计数器：

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) ". "; 
}

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

开头

根据我的阅读，我正确地设置了列表，但看起来不是。有什么帮助吗？

Answer 1

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

counter-reset: numberCounter alphaCounter;

W3C, 12.4 Automatic counters and numbering

CSS 包含多个计数器的列表计数不正确

CSS list with multiple counters doesn't count properly

list

css-counter