直接用<input type="radio">无法实现滑过变色，因为原生单选按钮的:hover仅作用于小圆点本身，而用户实际悬停的是标签或自定义图标；浏览器不自动将label的悬停状态透传给关联input，更不会影响兄弟节点，故需借助~相邻兄弟选择器与DOM顺序配合才能实现“滑过第n颗、前n颗全高亮”的连带效果。
为什么直接用 <input type="radio"> 无法实现滑过变色？
因为原生单选按钮的 :hover 只作用于按钮本身（那个小圆点），而用户实际悬停的是旁边的标签或自定义星星图标。浏览器默认不把 label 的悬停状态“透传”给关联的 input，更不会自动影响其他未被 hover 的兄弟节点。
所以常见错误是只给 label:hover 加样式，结果只能高亮当前星星，无法实现“滑过第3颗，前3颗都变色”的连带效果——这需要利用 CSS 的相邻兄弟选择器（~）和 DOM 顺序配合。
- 必须保证 HTML 中星星按从左到右、1→5 的顺序排列（不能倒序）
-
input必须放在对应label前面，且用for或嵌套绑定，否则input:checked ~ label会失效 - 所有
input需设为position: absolute; opacity: 0;，既隐藏又保留可交互性
如何用纯 CSS 实现“滑过第 n 颗，1~n 全部高亮”？
核心是利用 input:hover ~ label 和 input:checked ~ label 的组合匹配。前提是：每个 input 的 id 要和它后面所有 label 的 for 属性一致，且所有 input 和 label 在同一层级、按评分顺序线性排列。
<div class="star-rating"> <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> <input type="radio" name="rating" id="star3" value="3"> <label for="star3">★</label> <input type="radio" name="rating" id="star2" value="2"> <label for="star2">★</label> <input type="radio" name="rating" id="star1" value="1"> <label for="star1">★</label> </div>
对应关键 CSS：
立即学习“前端免费学习笔记（深入）”；
-
input:hover ~ label, input:hover + label—— 捕获悬停时“当前及后续所有 label”，但我们要的是“前面”，所以得靠反向顺序写法（见下一条） - 实际生效的是：
input#star3:hover ~ label, #star3:checked ~ label，再配合label的float: right或flex-direction: row-reverse让 DOM 顺序与视觉顺序相反 - 更稳妥做法：把
input放在label后面，改用label:hover ~ input不行（~ 是向后选），所以主流方案仍是 DOM 正序 +flex-direction: row-reverse
移动端点击区域太小，怎么扩大触控范围又不破坏样式？
原生 label 点击区域默认仅限文字/图标本身，手指点不准。不能简单加 padding，否则星星间距崩坏；也不能用 font-size 拉大，会失真。
- 给
label设display: inline-flex; align-items: center; justify-content: center;，再加min-width: 40px; min-height: 40px; - 用
transform: scale(1.2)配合transition实现悬停放大，比单纯调大字体更可控 - 关键：在
label上加cursor: pointer;，并确保pointer-events: auto;（某些重置 CSS 会设成none） - 避免用
z-index层叠，否则 iOS Safari 可能触发 300ms 延迟
为什么选中后松开鼠标，星星颜色有时回退？
这是由于事件冒泡或 focus 状态丢失导致的。当用户快速划过星星再点击，:hover 状态可能先于 :checked 被清除，CSS 规则权重没覆盖住。
- 必须给
input:checked + label和input:checked ~ label显式声明颜色，且优先级高于:hover规则 - 不要依赖
input:focus，移动端无 focus；改用:checked作为唯一可信状态源 - 如果用了 JavaScript 监听
change并动态加 class，记得移除所有临时 hover class，否则松手后残留 - 检查是否意外触发了表单 reset，比如父容器有
type="reset"按钮或监听了submit事件
真正麻烦的是 Safari 对 ~ 选择器在 radio 组合中的渲染延迟，偶尔要加 will-change: transform; 强制硬件加速——但这只是权宜之计，本质还是 DOM 结构和 CSS 权重没理清。
