:hover仅响应悬停无法保存状态，必须用:checked固化选择，再通过input:checked + label点亮当前星、input:checked ~ label点亮后续星，且input必须在同级label之前。
为什么直接用 :hover 做五星动画会失效？
因为纯 CSS 实现动态填充依赖用户交互触发状态变化，而 :hover 只能响应鼠标悬停，无法保存选中结果。真实场景中，用户点完一颗星就得“记住”这个选择——只有 <input type="radio"> 配合 :checked 才能固化状态。兄弟选择器（~ 和 +）则负责把“已选中这颗星”这个信号，传递给它前面或后面的星星元素，从而实现从左到右逐个点亮的效果。
如何用 input:checked ~ label 实现向右填充？
关键在于 DOM 顺序：所有 input 必须放在对应 label 之前，且同级；否则兄弟选择器无法向上匹配。常见错误是把 label 包裹 input，那样就变成后代关系，~ 失效。
-
input必须有name属性（确保单选互斥）和唯一id -
label用for关联对应input的id，或直接包裹input（但此时不能用~，得换思路） - 填充逻辑靠
input:checked ~ label选中“当前 input 后面所有 label”，再配合input:checked + label精准控制当前星 - 样式上，
label用字体图标（如 ★）或伪元素，input设为position: absolute; opacity: 0隐藏但保留可交互性
示例结构：
<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:checked ~ label { color: #ffc107; }
input:checked + label { color: #ffc107; }
为什么用 input + label 而不是 input ~ label 控制当前星？
+ 是相邻兄弟选择器，只匹配紧挨着的下一个 label；~ 匹配后面所有同级 label。如果只用 ~，点第 3 颗星时，第 4、5 颗也会被点亮，但第 3 颗本身不会——因为 input#star3:checked ~ label 不包含它自己对应的 label（那个 label 在 input 之后，但不是“后面”的兄弟，而是“下一个”）。所以必须用 + 补上当前星，再用 ~ 填充右侧。
- 点
#star3→#star3:checked + label点亮第 3 颗，#star3:checked ~ label点亮第 4、5 颗 - 点
#star1→ 只触发+#star1对应的label，~后面没其他label，所以只亮一颗 - 若 DOM 顺序反了（
label在input前），两个选择器都失效
移动端点击区域小、误触多，怎么提升可用性？
CSS 星星默认点击热区只有文字大小，手指点不准。不能只加 font-size，否则布局撑开。正确做法是用 label 扩展可点击区域，同时保持视觉尺寸不变：
- 给
label设display: inline-block; padding: 8px;，不改变图标位置 - 用
transform: scale(1.2)配合transition做悬停放大，但注意别影响兄弟选择器匹配（transform不影响文档流） - 禁用
user-select: none防止误选文字 - 对 iOS Safari，加
-webkit-appearance: none到input，避免默认 radio 样式干扰
最容易被忽略的一点：没有 for 或包裹关系的 label，在部分 Android 浏览器里点击无效——哪怕 DOM 看起来挨着，也必须显式关联。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
