用 input[type="radio"] 实现星级评分需利用其互斥特性，通过隐藏原生控件、label 关联视觉星级，并用 :checked 和 :hover + 相邻选择器实现点亮与悬停预览，确保键盘可访问与无障碍支持。
用 input[type="radio"] 实现可点击的星级评分
纯 HTML + CSS 就能做出可用的星级评分，关键不是用 input[type="range"] 或 JS 模拟，而是利用 radio 的互斥特性 + 隐藏原生控件 + 用 label 关联视觉星级。
常见错误是直接对 input 设置 display: none 后忘了用 for 或嵌套保证可访问性，结果屏幕阅读器读不到、键盘无法 tab 切换、点击星星没反应。
- 每个星级对应一个
input[type="radio"]，name相同（如name="rating"），value为 1–5 -
label必须通过for属性绑定到对应input的id，或直接把input嵌在label内（更稳妥） - 用
input:checked + label或input:focus + label控制高亮样式，避免依赖 JS
CSS 中如何让星星“亮起来”且支持悬停预览
不能只靠 :checked —— 用户鼠标移过去还没点，得看到将要选几星。所以要用 :hover 配合相邻兄弟选择器，从右往左“点亮”前面所有星星。
典型写法是把 input 和 label 按 5→1 顺序排列，然后用 input:hover ~ label + input:checked ~ label 组合控制；但更稳的是把 label 放在 input 后面，用 input:hover + label 和 input:checked + label，再配合 input:checked ~ label 点亮更左侧的星。
- 推荐结构：每个
input后紧跟其label（含 ★ 符号），这样input:hover + label可精准控制当前星，input:checked ~ label可影响后续所有星 - 用 Unicode ★（
★）比图片简单，但注意字体渲染差异；若需兼容旧环境，可用伪元素::before+content - 悬停时点亮“当前及左侧所有星”，需确保 DOM 顺序与评分逻辑一致（即第 1 星在最左，第 5 星在最右）
为什么不用 input[type="number"] 或 range
因为它们不天然支持“5 星离散选择”，range 滑块默认连续、步长难控、移动端体验差；number 虽可设 min="1" max="5"，但用户仍能手动输入非法值（如 0 或 6），且无直观星级反馈。
-
range在 iOS 上拖动不灵敏，且step="1"有时被忽略，导致实际取值非整数 -
number的上下箭头操作效率低，无法一触即选，也不符合“星级评分”的交互直觉 -
radio方案天然禁用非法值、语义清晰、键盘Tab+Space即可操作，无障碍支持更好
提交时后端怎么拿到选中的值
表单提交时，只有被选中的那个 radio 的 name 和 value 会发到后端，其他同名 radio 不参与提交 —— 这正是你要的：用户选了 4 星，后端收到 rating=4。
如果用 JS 获取，别遍历所有 input，直接查 document.querySelector('input[name="rating"]:checked')，它返回 null 表示没选，否则取 .value。
- 服务端无需额外校验范围（1–5），因为 HTML 层已限制只有这 5 个合法
value - 但别省略后端校验：用户可能绕过前端直接发请求，仍需检查是否在 1–5 区间
- 若需默认值（比如“未评分”状态），加一个
value=""的隐藏radio并设checked，但注意它会让整个组初始无选中项（因value为空字符串，不满足 1–5）
label 可聚焦（加 tabindex="0" 或用 button 替代），以及 radio 组有明确的 legend 或 aria-label。否则视障用户根本不知道这是个评分控件。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
