必须用 label 的 for 属性绑定单选框的 id，结构应为先 input 后 label，通过 input:checked + label 控制星星高亮，name 须一致、value 用数字，移动端需确保 label 可点击且无样式阻断。
label 怎么绑定单选框实现点击星星就选中
必须用 for 属性关联 input 的 id，不能只靠包裹关系——因为单选框默认是隐藏的，靠 label 触发点击才真正生效。否则点星星没反应。
常见错误是写成：<label><input type="radio"> ★</label>，这样在部分浏览器（尤其是 Safari 移动端）无法稳定触发选中。
- 每个
input必须有唯一id，对应label的for值 - 把
input放在 label 外面或里面都行，但for和id必须严格匹配 - 推荐把
input放在 label 前面，方便用 CSS 通过input:checked + label控制样式
怎么让星星显示「已选中」状态（不依赖 JS）
纯 CSS 实现的关键是利用 :checked 伪类 + 相邻兄弟选择器（+），前提是 DOM 顺序合理：先 input，再 label。
示例结构：
<input type="radio" name="rating" id="star5" value="5"><label for="star5">★</label> <input type="radio" name="rating" id="star4" value="4"><label for="star4">★</label>
CSS 控制高亮：
input[type="radio"] { display: none; }
input[type="radio"]:checked + label { color: #ffc107; }
- 必须隐藏
input，否则默认单选框会和星星并排显示 - 如果想支持「悬停评分」（鼠标划过显示半星/高亮），需要额外用
:hover+~通用兄弟选择器，但注意兼容性（IE 不支持~） - 移动端点击区域小，建议给
label加display: inline-block和最小宽度
name 属性为什么必须一致、value 怎么设才合理
所有星级单选框的 name 必须相同（如 name="rating"），否则它们互不排斥，用户能同时选多个——这不是星级打分的逻辑。
value 推荐用数字（"1" 到 "5"），后端或 JS 拿到的就是可计算的数值，避免用文字如 "very-good" 增加解析成本。
- 如果默认不选中任何项，不要设
checked；若需默认 3 星，给对应input加checked即可 - 注意表单提交时，未选中的 radio 不会发送任何值，后端需做好空值处理
- 若用在 React/Vue 等框架里，别直接操作
checked属性，应走受控组件逻辑
移动端点击无响应或延迟？检查这几个点
iOS Safari 和某些安卓 WebView 对 label 绑定有更严的触发条件：label 内容必须是可点击文本或内联元素，且不能被 pointer-events: none 阻断。
- 确保
label没有font-size: 0或opacity: 0这类“隐形但占位”的写法 - 避免用
transform: scale(0)隐藏 input，改用position: absolute; left: -9999px更稳妥 - 在 iOS 上，如果 label 里只有 emoji（如 ★），有时点击热区偏小，建议加
line-height和padding扩大响应区域 - 真机测试时，优先用
touchstart替代click的场景极少，这里 label + radio 原生 click 就够用
最易被忽略的是：label 的 for 值拼错一个字母，或者 input 的 id 有空格/特殊字符——这种问题不会报错，但点击完全失效，调试时得逐个核对 DOM。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
