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

counter-increment是一个像许多其他人一样的css属性。你只能在元素中设置它。基本上，最后一个值会覆盖以前的任何值。

Answer 2

经过多次测试后，我自己找到了答案。你可以使用尽可能多的计数器进行反增量，也要感谢@Mauricio提醒我它的css属性和许多其他人一样。

＆＃13;

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';
}

＆＃13;

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

＆＃13;

为什么两个反递增在css选择器中不起作用

2 个答案: