要让 hover 时前面的星星也变色，需用 input:hover ~ label 配合正确 DOM 顺序（input 在 label 前且同级），并结合 :checked 实现已选与预览状态分离；radio 保证单选语义，隐藏 input 用 clip 而非 display: none。
hover 时怎么让前面的星星也变色？
关键在 :hover 配合 ~（后续兄弟选择器），但必须保证所有星星是同一级、顺序排列的 input[type="radio"] 或 label，且 input 在对应 label 前面（否则无法用 input:hover ~ label 反向控制）。
常见错误：把 label 放 input 前面，或用 div 包裹打乱层级——~ 只认同级、后续、未被包裹打断的兄弟节点。
- 推荐结构：连续排布的
input+ 紧跟其后的label，每个input的id和label的for匹配 - hover 目标必须是
input（隐藏它），再用input:hover ~ label影响自己及后面所有label - 要高亮“当前及之前”的星星，得给每个
input加:checked样式，并用input:checked ~ label+input:hover ~ label共同覆盖
为什么用 radio 而不是 checkbox？
radio 天然互斥，用户点一个就自动取消其他，符合评分“单选”语义；而 checkbox 需手动 JS 清除其他选项，否则可能多选，破坏交互逻辑。
兼容性上，radio + label 组合在所有现代浏览器中点击区域更大、可访问性更好（支持键盘 Tab + Space），且无需 JS 就能响应 :checked 状态。
立即学习“前端免费学习笔记（深入）”；
-
name属性必须一致（如name="rating"），否则互斥失效 - 值建议用数字（
value="1"到value="5"），方便后续 JS 读取或表单提交 - 别忘了
input设position: absolute; clip: rect(0 0 0 0);隐藏但保留可交互性
hover 和 click 状态冲突怎么处理？
用户 hover 到第 4 颗星，松手没点，此时不应保留 4 星状态；但若已点过第 3 颗，又 hover 到第 5 颗，视觉预览应为 5 星，而实际值仍是 3 星——这是两个独立状态，CSS 本身无法“暂存 hover 值”，只能靠视觉反馈区分。
解决思路是用 CSS 同时定义三类样式：input:checked ~ label（已选）、input:hover ~ label（悬停预览）、以及 input:checked:hover ~ label（已选且悬停，保持高亮不降级）。
- 避免写成
input:hover ~ label, input:checked ~ label这种并集，会导致 hover 离开后残留样式 - 更稳妥的是：先设默认灰色，再用
input:checked ~ label设金色，最后用input:hover ~ label覆盖未选中的部分（注意权重） - 如果需要“hover 即提交”，就得加 JS 监听
change，纯 CSS 做不到
移动端 touch 设备 hover 不生效怎么办？
:hover 在 iOS Safari 和部分安卓浏览器中，只在第一次触摸后短暂触发，且不支持“悬停即高亮”这种连续反馈——用户点一下，:hover 生效一次就消失，无法维持预览态。
这不是 bug，是规范行为。真正可靠的方案是放弃依赖 :hover 做核心逻辑，改用 :focus-within 或 JS touchstart 模拟，或者干脆接受移动端以 click 为主，hover 仅作桌面端增强。
- 可用
@media (hover: hover) and (pointer: fine)条件性启用 hover 样式，避免干扰触屏设备 - 别试图用
:active替代:hover，它只在按下瞬间生效，松手即失 - 如果必须支持触屏预览，JS 是唯一可控路径：监听
touchstart给父容器加临时 class，再用 CSS 控制
input 和 label 的 DOM 顺序与显隐方式——顺序错一丁点，~ 就完全失效；display: none 会砍掉可访问性和键盘支持，必须用 clip 或 visibility: hidden 配合 position。 
