具有多个计数器的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) ". "; 
}

此列表li.lettered使用A.,B.等正确计算-items.但li.numbered-items始终以"1"开头.如果我将计数器复位的顺序切换为counter-reset: numberCounter, alphaCounter;,则数字正确计数,字母始终以"A"开头.

从我读到的内容来看,我正确地设置了列表,但是很好,显然没有.对此有何帮助？

Answer 1

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

counter-reset: numberCounter alphaCounter;

W3C,12.4自动计数器和编号