使用css和隐藏radio实现五星评分控件，通过label与input关联，利用:hover和:checked状态配合兄弟选择器~控制星星高亮，内联svg作背景图，支持悬停预览与点击选星。
使用 CSS 制作一个简易的评分星星控件，可以通过 inline-block 布局和 :hover 伪类实现鼠标悬停时高亮星星的效果。结合隐藏的单选按钮（input[type=radio]），还能实现点击选择评分的功能。
基本结构与原理
控件由一组 radio input 和对应的 label 组成。每个 label 代表一个星星，通过 CSS 设置为 inline-block 显示，排列成一行。利用 label 的 for 属性绑定到 input，点击 label 即选中对应分数。 关键点：- 隐藏 input，只保留 label 可见
- label 使用背景图显示星星，默认为灰色
- 鼠标悬停在某个星星上时，该星及其左侧所有星星高亮（利用 hover + 后续兄弟选择器 ~）
- 选中后的星星保持高亮色，优先级高于 hover 效果
样式控制细节
使用内联 SVG 作为背景图，避免额外资源请求。未选中状态用浅灰色，悬停时变为黄色，选中后为深黄色。 核心 CSS 技巧：- display: inline-block 让 label 并排排列
- :hover 配合 ~ 选择器，影响后续兄弟元素
- input:checked ~ label 实现持久高亮已选星星
- 将 hover 样式定义在 checked 样式之后，确保悬停时仍可预览更高分
HTML 示例代码
以下是一个完整的五星级评分控件示例：<div class="star-rating"> <input type="radio" name="rating" id="star1" value="1"><label for="star1"></label> <input type="radio" name="rating" id="star2" value="2"><label for="star2"></label> <input type="radio" name="rating" id="star3" value="3"><label for="star3"></label> <input type="radio" name="rating" id="star4" value="4"><label for="star4"></label> <input type="radio" name="rating" id="star5" value="5"><label for="star5"></label> </div>用户悬停时能实时预览评分效果，点击后选定分数，适合用于评价系统。 基本上就这些。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
