纯CSS写评分

最新推荐文章于 2025-05-16 15:15:05 发布

偷走你的笑

最新推荐文章于 2025-05-16 15:15:05 发布

阅读量601

点赞数 1

分类专栏：深蓝的大学

深蓝的大学专栏收录该内容

27 篇文章

订阅专栏

博客转载自https://www.cnblogs.com/hesj/p/10536792.html，介绍了纯CSS写评分用到的知识，如E:checked用于单选或复选框选中，E ~ F选择后面兄弟节点，E::after和E::before伪元素选择器插入内容，体现了纯CSS写评分的技巧，代码少且优美。

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

转载：https://www.cnblogs.com/hesj/p/10536792.html

用到的知识：
E:checked:单选或复选框被选中

E ~ F: 选择后面的兄弟节点们:选择后面的兄弟节点

E::after,E::before: 伪元素选择器在匹配E的元素后面(前面)插入内容

<!DOCTYPE html>
<html>
    <div class="star-box">
        <input type="radio" name="star" id="star5" hidden/>
        <label for="star5"></label>

        <input type="radio" name="star" id="star4" hidden/>
        <label for="star4"></label>

        <input type="radio" name="star" id="star3" hidden/>
        <label for="star3"></label>

        <input type="radio" name="star" id="star2" hidden/>
        <label for="star2"></label>

        <input type="radio" name="star" id="star1" hidden/>
        <label for="star1"></label>
    </div>
</html>
<style>
.star-box{display:table;position: absolute;left: 50%;top: 50%;}
.star-box label{float:right;color:#999;}
.star-box label::after{content:'★';font-size:28px;padding:5px;display:inline-block;line-height:1;}
.star-box input:checked~label,
.star-box label:hover~label,
.star-box label:hover{color:red;}
</style>

效果截图
结果如上图所示，纯CSS写评分还是技巧的一种体现。这种方式不仅优美而且代码少。