用实现五星评分的核心是：5个同name的radio隐藏于label下方，通过input:checked + label控制高亮，label用for绑定或包裹input，确保可访问性、键盘操作和表单提交。
直接用原生 HTML + CSS 就能实现一个可点击、可 hover、支持半星、无障碍友好的五星评分组件，不需要任何框架或 JS 也能完成基础交互；但要支持“只读显示”“动态更新”“键盘操作”和“表单提交”，JS 是绕不开的。
怎么用
核心思路是把 5 个 叠在星星图标下方，用 label 关联并覆盖视觉层。浏览器原生 radio 组天然保证单选，且自带 focus/checked 状态。
关键点：
- 每个
的name必须相同（如name="rating"），value设为 1~5 -
label用for属性绑定id，或直接包裹input（更稳妥） - CSS 中把
input定位到星星下方并设opacity: 0; position: absolute;，避免遮挡但保留可点击区域 - 利用
input:checked ~ label或input:focus ~ label控制高亮样式（注意兄弟选择器限制）
示例结构片段：
<div class="star-rating"> <input type="radio" id="star5" name="rating" value="5"><label for="star5">★</label> <input type="radio" id="star4" name="rating" value="4"><label for="star4">★</label> <!-- ... --> </div>
为什么 :hover 和 :focus 星星状态容易错乱
纯 CSS 实现 hover 效果时，常见错误是只给 label:hover 上色，结果鼠标从一颗星移到相邻星时，中间有空隙导致状态重置；focus 问题则多因 radio 本身不可见，键盘 tab 到它时没有视觉反馈。
解决方式：
- 把所有
label用display: inline-block并设margin: 0，消除默认间隙 - hover 效果应作用于整个 rating 区域：用
.star-rating:hover label+.star-rating:hover label:hover ~ label实现“悬停某星，左侧全亮” - 为
input:focus + label单独加 outline 或 box-shadow，确保键盘用户可见焦点 - 若需半星（如 3.5），必须用 JS 计算 —— CSS 无法对非整数
value做条件匹配
怎么让评分值真正参与表单提交或 JS 获取
radio 组提交时只会发选中的那个 value，但很多场景需要读取当前值（比如点击后触发 API）、或初始化时设默认值（如编辑已有评分）。
实操要点：
- 初始化默认值：给对应
input加checked属性，或用 JS 设置document.querySelector('[value="3"]').checked = true - 监听变化：用
change事件（不是 click），绑定到name="rating"的任意 radio 上即可 - 获取当前值：
document.querySelector('input[name="rating"]:checked)?.value—— 注意空值判断 - 如果页面有多个评分组件，务必用不同
name，否则互相干扰
简单监听示例：
document.querySelectorAll('input[name="rating"]').forEach(radio => {
radio.addEventListener('change', () => {
const val = document.querySelector('input[name="rating"]:checked')?.value || '0';
console.log('当前评分：', val);
});
});
哪些地方最容易被忽略却影响体验
无障碍（a11y）和移动端适配是高频翻车点，不是“锦上添花”，而是“不加就残缺”。
- 缺少
aria-label或aria-labelledby：屏幕阅读器无法知道这是“评分”，应加在容器上，如aria-label="请为该商品打分，满分5星" - 移动端 touch 区域太小：iOS Safari 对小于 44px 的可点击区域会放大，但安卓可能直接点不中，建议
label最小尺寸设为min-height: 44px并居中图标 - 未处理未选中状态：用户清空评分（比如点回 0）时，radio 组没有“空选项”，需额外加一个
value="0"的 radio 或用 JS 清除 checked - 字体图标在无网络时失效：用 SVG 内联或系统 emoji（如
★）比引用外部 iconfont 更可靠
真实项目里，最常被砍掉的是键盘导航和屏幕阅读器支持，结果上线后被合规团队打回 —— 这些不是“高级功能”，是基础可用性门槛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
