伪类显示选中合计（无js代码）_代码中选中导览伪类-优快云博客

本文链接：https://blog.youkuaiyun.com/chelen_jak/article/details/79272904

本文介绍了一种利用CSS计数器实现动态统计选择项数量的方法。通过两个实例——统计选中的冰淇淋口味与饮料种类，展示了如何使用:before和:after伪元素及counter-reset, counter-increment属性来实时更新统计结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：CSS之before, after伪元素特性表现两则

先上图：

[html]

<div class='ice-div'>
  <strong>一、下面冰淇淋你吃过几个？</strong>
  <ol>
    <li>
      <input type="checkbox" id="icecream1">
      <label for="icecream1">哈根达斯</label>
    </li>
    <li>
      <input type="checkbox" id="icecream2">
      <label for="icecream2">和路雪wall's</label>
    </li>
    <li>
      <input type="checkbox" id="icecream3">
      <label for="icecream3">八喜冰淇淋</label>
    </li>
  </ol>
  你总共选择了 <strong class="ice-total"></strong> 款冰淇淋！
</div>

<br/>

<div class='drink-div'>
  <strong>二、你经常饮的饮料？</strong>
  <ol>
    <li>
      <input type="checkbox" id="drink1">
      <label for="drink1">果汁</label>
    </li>
    <li>
      <input type="checkbox" id="drink2">
      <label for="drink2">汽水</label>
    </li>
    <li>
      <input type="checkbox" id="drink3">
      <label for="drink3">啤酒</label>
    </li>
  </ol>
  你总共选择了 <strong class="drink-total"></strong> 款饮料！
</div>

[css]

body {
  counter-reset: icecream drink;  /*初始化变量: icecream 和 drink*/
}

.ice-div input:checked {
  counter-increment: icecream;
}


.ice-total::after {
  content: counter(icecream);
}

.drink-div input:checked {
  counter-increment: drink;
}

.drink-total::after {
  content: counter(drink);
}