為什么兩個反向增量在CSS選擇器中不起作用

Question

如您在下面看到的，只有最后一個反增量起作用。 這是錯誤還是功能？ 除了使用不同的選擇器之外，還有什么方法可以使用多個計數器增量？

 input#p1:checked { counter-increment: --t1 5; } input#p2:checked { counter-increment: --t1 5; counter-increment: --t2 5; /* only the last one works */ } input#p3:checked { counter-increment: --t1 5; counter-increment: --t2 5; counter-increment: --dummy 5; /* only the last one works */ } #result::after { content: counter(--t1) '*' counter(--t2) ' points'; } 

 <input type="checkbox" id="p1"> <input type="checkbox" id="p2"> <input type="checkbox" id="p3"> <div id="result">result: </div> 

Answer 1

和其他許多屬性一樣，反增量是css屬性。 您只能在元素內設置盎司。 基本上，最后一個值會覆蓋所有先前的值。

Answer 2

經過更多測試后，我自己找到了答案。 您可以使用counter-increment來使用任意數量的計數器，這也要感謝@Mauricio提醒我它與其他許多屬性一樣都是css屬性。

 input#p1:checked { counter-increment: --t1 5; } input#p2:checked { counter-increment: --t1 5 --t2 5; } input#p3:checked { counter-increment: --t1 5 --t2 5; } #result::after { content: counter(--t1) '*' counter(--t2) ' points'; } 

 <input type="checkbox" id="p1"> <input type="checkbox" id="p2"> <input type="checkbox" id="p3"> <div id="result">result: </div>