http://js.jirengu.com/nacequtula/2/

技术点

1. :checked伪类
2. +选择相邻兄弟元素
3. counter三件套
   • counter-reset: topicCounter;
   • counter-increment: topicCounter; // 增加计数器值
   • content:counter(topicCounter)

html

  <p>请选择你感兴趣的标签:</p>
  <input type="checkbox" id="topic1"/>
  <label for="topic1" class="topic">Vue</label>
  <input type="checkbox" id="topic2"/>
  <label for="topic2" class="topic">REACT</label>
  <input type="checkbox" id="topic3"/>
  <label for="topic3" class="topic">JQ</label>

  <p>您已选择<span class="topic-counter"></span>个标签。</p>

css

[type="checkbox"]{
    position: absolute;
    clip: rect(0 0 0 0);
}

body {
    // 初始或重新设置计数器
    counter-reset: topicCounter;
}
.topic{
  padding: .5rem 1rem;
  border:.1rem solid rgb(70, 185, 192);
  background:rgb(220, 241, 242);
}

:checked+label {
  color:#fff;
  background:rgb(70, 185, 192);
  // 增加计数器值
  counter-increment: topicCounter;
}


.topic-counter::before{
  // 计数器的数值只能通过伪元素中的content显示
  content:counter(topicCounter)
}

页面展示

image.png