爲什麼兩個計數器增量在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

經過多次測試，我自己找到了答案。你可以根據需要使用任意數量的計數器，同時也要感謝@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>

Answer 2

反增量是一個CSS屬性和許多人一樣。你只能在元素內設置它盎司。 基本上，最後一個值會覆蓋以前的任何值。