flex-direction: row-reverse 用于使视觉顺序与 DOM 顺序相反，确保 ~ 兄弟选择器能匹配“当前及左侧”元素；DOM 必须倒序排列（star5→star1），再通过 row-reverse 翻转视觉顺序，才能实现悬停第3颗时前3颗高亮的交互逻辑。
为什么必须用 flex-direction: row-reverse 才能正确悬停高亮？
因为 CSS 的 ~（通用兄弟选择器）只能选中「当前元素之后」的兄弟元素，不能往前选。如果星星按正常顺序排列（star1 → star5），star3:hover ~ label 只会匹配 star4 和 star5，而无法点亮 star1、star2 —— 这和用户直觉“悬停第3颗，前3颗都亮”完全相反。
所以得把 DOM 顺序倒过来：让 star5 在最左，star1 在最右，再用 flex-direction: row-reverse 把视觉顺序翻回来。这样 star3:hover ~ label 实际匹配的是视觉上它左边（即 DOM 中它后面）的所有 label，正好对应“点亮当前及更左边的星”。
- DOM 结构必须是
<input id="star5"><label for="star5">★</label><input id="star4"><label for="star4">★</label>... - 不能只靠
transform: scaleX(-1)或direction: rtl模拟反转 —— 它们不改变 DOM 顺序，~依然失效 - 移动端 Safari 对
row-reverse + flex-wrap有兼容性问题，建议固定宽度避免换行
:hover 和 :checked 的样式规则为什么不能混写？
两者触发时机和作用域完全不同：:hover 是临时预览态，只影响当前及后续 label；:checked 是持久选中态，需覆盖所有已选星星及其左侧（即更高分值）的星星。若写成同一选择器，比如 .rating label:hover, .rating input:checked ~ label，会导致悬停时高亮范围错误（例如 hover star2 会意外点亮 star5–star3）。
- 正确分离写法：
.rating label:hover, .rating label:hover ~ label { color: gold; }（悬停从当前往右亮） - 对应选中逻辑：
.rating input:checked ~ label { color: gold; }（但注意：这依赖 DOM 倒序，所以 checked 的 input 在左，它右边的 label 才是低分星） - 必须加
.rating input:checked + label单独处理最高分（star5）—— 因为它左边没 input，~选不到自己
如何让半星或小数评分（如 3.7）也能用纯 CSS 表达？
纯 CSS 无法读取 JS 计算值或做小数运算，所以「动态渲染 3.7 颗星」必须放弃 :checked 方案，改用背景裁剪或伪元素偏移。最可靠的是双层结构 + width 百分比控制：
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
position: relative; overflow: hidden; - 底层放 5 颗灰色星（
color: #ddd），固定宽度 - 上层用
::before生成 5 颗金色星，绝对定位，width: calc(20% * 3.7)（注意：CSS 不支持变量计算，实际需由 JS 注入内联style="width: 74%;"） - 不要用
clip-path：Firefox 旧版不支持，且无法平滑过渡动画
这意味着：纯 CSS 可实现静态小数评分展示，但无法响应用户点击产生小数结果 —— 那部分必须交由 JS 处理后写回样式。
移动端点击失效或误触的常见原因
CSS 星级组件在 iOS 和 Android Chrome 上常出现「点不中」「连点两次才生效」，核心原因是 label 绑定区域太小，且没有适配触摸反馈延迟。
- 给
label加min-width: 36px; min-height: 36px;（满足苹果人机指南最小触控尺寸） - 移除
transition: color 0.2s中的0.2s，改用0.05s或直接去掉 —— 过渡动画会干扰 iOS 的 click 事件冒泡 - 禁止缩放：
meta name="viewport" content="width=device-width, user-scalable=no"，否则 pinch-zoom 后 label 坐标偏移 - 不要用
button元素替代label：Safari 对button内部:checked状态更新有缓存 bug
真正难处理的不是“怎么亮”，而是“亮了之后怎么让用户确信它已被记录”——纯 CSS 没有提交行为，所有选中状态都只停留在当前页面，刷新即丢。这点必须提前向产品确认是否可接受。
