必须将input逆序排列（5→4→3→2→1）并配合:hover+~和:hover+选择器实现悬停高亮，因CSS兄弟选择器只能向后选中；用radio而非div确保表单提交、键盘导航及无障碍支持。
星级评分怎么用 :hover 触发整行高亮
关键在「鼠标悬停在某个星星上时，前面所有星星都要变色」。纯 CSS 实现这事，得靠 :hover + 相邻兄弟选择器 ~ 或紧邻兄弟选择器 +，但顺序很重要：HTML 星星必须从右往左排（即最后一个 input 对应 1 星，第一个对应 5 星），否则 ~ 没法往前选中。
常见错误是按直观顺序写 HTML（1 星在左、5 星在右），结果 hover 5 星时只能影响它右边的元素，完全反了。
- HTML 中
input[type="radio"]必须逆序排列（5→4→3→2→1） - 每个星星用
label包裹，for指向对应input -
input隐藏（position: absolute; clip: rect(0 0 0 0);），只留label可见 - 利用
input:checked ~ label控制「已选中状态」，用input:hover ~ label, input:hover + label控制「悬停影响范围」
为什么必须用 input[type="radio"] 而不是 div 模拟
因为只有表单控件（尤其是 input）能触发 :hover 并参与兄弟选择器链；div 没有状态，无法用 CSS 记住“用户点了哪个”，更没法让后续交互（比如提交评分）有真实值。
用 div + data- 属性模拟，看似简单，但会立刻掉进两个坑：
立即学习“前端免费学习笔记（深入）”；
- 无法获取用户最终选择（没
name和value，表单提交或 JS 读取都得额外绑定事件） - 键盘导航（Tab 键）和屏幕阅读器不可访问——WCAG 不通过
- 移动端 touch 事件响应延迟或失效（
:hover在 iOS 上行为不一致）
~ 和 + 在星级里到底怎么配着用
~ 选中后面所有同级兄弟，+ 只选中紧挨着的下一个。星级场景里，两者要配合：用 + 确保当前星被 hover 时，它左边那个星也响应；用 ~ 把更左边的全拉进来。
假设 HTML 是逆序的：input#star5 → input#star4 → … → input#star1，那么：
-
#star5:hover ~ label→ 影响 4、3、2、1 星 -
#star4:hover ~ label→ 影响 3、2、1 星 - 但 #star5:hover 不会影响 #star4 自身，所以还得补一条：
#star5:hover + label - 实际写法常合并为：
input:hover ~ label, input:hover + label
移动端和无障碍支持容易漏掉的点
iOS Safari 对 :hover 的处理很保守：默认只在第一次点击后临时激活，之后就失效。这意味着单纯依赖 :hover 的星级，在 iPhone 上可能点一次就卡住，再点没反应。
真正可用的方案必须加一层兜底：
- 给每个
input加ontouchstart=""（空属性），强制 iOS 激活伪类 - 用
:focus-within或:checked做 fallback 样式，确保键盘用户能看清当前焦点/选中态 - 每个
label加role="radio"和aria-checked（JS 同步更新），否则 VoiceOver 不知道这是单选组
别指望纯 CSS 能覆盖所有交互路径。hover 是甜点，focus 和 checked 才是主食。
