http://js.jirengu.com/nacequtula/2/
技術(shù)點(diǎn)
- :checked偽類
- +選擇相鄰兄弟元素
- counter三件套
- counter-reset: topicCounter;
- counter-increment: topicCounter; // 增加計(jì)數(shù)器值
- content:counter(topicCounter)
html
<p>請(qǐng)選擇你感興趣的標(biāo)簽:</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>個(gè)標(biāo)簽。</p>
css
[type="checkbox"]{
position: absolute;
clip: rect(0 0 0 0);
}
body {
// 初始或重新設(shè)置計(jì)數(shù)器
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);
// 增加計(jì)數(shù)器值
counter-increment: topicCounter;
}
.topic-counter::before{
// 計(jì)數(shù)器的數(shù)值只能通過偽元素中的content顯示
content:counter(topicCounter)
}
頁(yè)面展示
image.png
