纯CSS星级评分仅支持单向锁定，无法实现点击切换与取消选中；radio依赖name统一且+选择器无法反向影响前序星，checkbox虽可取消但hover无法高亮前置星；~可选后续同级label但要求input在label前且同级。
用 :checked + + 实现点击评分，不靠 JS
纯 CSS 星级评分能跑，但只在「单向点击后锁定」场景下靠谱——比如表单提交前的只读评分、静态展示页的预设分。一旦需要「悬停高亮+点击切换+取消选中」，:checked 配 + 就会漏行为。
核心限制在于：单选按钮（<input type="radio">）一旦选中，无法用纯 CSS 取消；而复选框（type="checkbox"）虽可取消，但兄弟选择器 + 只能选「紧挨着的下一个」元素，不能跨多个标签回溯或覆盖前面的星。
- 用
<input type="radio">：点 3 星 → 3 星及之后亮，但点 2 星无法让第 3 星变暗（+拿不到前面的兄弟） - 用
<input type="checkbox">：能点/取消任意星，但悬停时无法只高亮「当前星及之前」（+不支持反向选择） - 所有星必须按顺序排布，且每个
<input>后紧跟对应<label>，否则+失效
input[type="radio"] 的 name 属性必须相同
这是单选逻辑成立的前提。name 不一致，浏览器当多个独立控件处理，:checked 就各自为政，点哪个都只影响自己那颗星。
常见翻车点是复制粘贴时漏改 name，或者用 JS 动态生成但没统一赋值。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<input type="radio" name="rating" value="1"><label>★</label>，所有name="rating" - 错误写法：
name="rating1"、name="rating2"分散命名 - 如果页面有多个评分组件，每个组件内 name 独立，比如
name="post-rating"和name="comment-rating"
用 ~ 替代 + 支持非相邻星样式
+ 只能选下一个兄弟，~（通用兄弟选择器）能选后面所有同级匹配元素。这对「点 4 星，让前 4 颗都亮」很关键。
但注意：它只对「已渲染在 DOM 中、且和 input 同级」的 label 生效。input 必须放在 label 前面，且不能被其他标签包裹隔开。
- 结构必须是：
<input><label></label><input><label></label>… - 不能是：
<label><input></input></label>（此时:checked + label无效） - 示例规则：
input[value="3"]:checked ~ label { color: gold; }—— 点第 3 颗，第 3、4、5 颗 label 都会变色；所以实际要用:checked ~ label, :checked + label组合控制范围
悬停时高亮「当前及之前」星，:hover 必须作用在 label 上
因为鼠标没法直接 hover 到看不见的 <input> 上。label 是用户真正交互的表面元素，所以悬停逻辑得从它出发。
但这里有个隐藏坑：label 默认是行内元素，若没设 display: inline-block 或 display: block，:hover 可能响应区域极小，甚至点不中。
- 给每个
label加display: inline-block，并设置足够宽高 - 悬停样式要配合
~：例如label:hover ~ label, label:hover让它和后面的星一起亮，再用input:checked ~ label覆盖已选中的状态 - 如果用了
pointer-events: none在 input 上（常见于隐藏原生控件），别忘了 label 也要加pointer-events: auto，否则 hover 失效
