本文详解 star rating 组件中“点击第 n 颗星却从右侧开始填充”的根本原因，并提供 css 与 html 结构协同修正方案，确保点击左侧星星时，左侧连续 n 颗星正确高亮。
星级评分系统在前端开发中十分常见，但一个容易被忽视的细节是：视觉顺序（左→右）与 DOM 顺序、CSS 排列逻辑必须保持一致。你当前的问题——点击第 4 颗星却高亮最右侧的 4 颗星——并非 JavaScript 逻辑错误，而是由 CSS 中 flex-direction: row-reverse（虽未显式写出，但实际隐含或已被误设）与相邻选择器 ~ 的工作原理共同导致的。
关键在于：你的 CSS 使用了 input:checked ~ label::before 这一选择器。它只会匹配 已选中单选框之后的所有 label（即 DOM 中位于该 元素后面的
这意味着：当 #star4 被选中时，#star4 ~ label 只会匹配 #star5 对应的 label（即最后一个），而不会影响 #star1–#star3 对应的 label —— 因为它们在 DOM 中位于 #star4 之前，不满足 ~（后续兄弟）选择器条件。
因此，标准解法不是修改 JS，而是反转容器的视觉流向，同时保持 DOM 顺序不变：将 .rating 的 flex-direction 设为 row-reverse，并同步反转 HTML 中 input + label 的排列顺序（让 star5 在前，star1 在后），从而让 :checked ~ label 能自然覆盖左侧所有星星。
✅ 正确做法如下：
1. 修改 CSS：
.rating {
display: flex;
flex-direction: row-reverse; /* 关键：视觉右→左排列 */
justify-content: center;
align-items: center;
gap: 8px; /* 推荐：替代 margin-right，更可控 */
}
.rating input[type="radio"] {
display: none;
}
.rating label {
font-size: 60px;
cursor: pointer;
transition: transform 0.2s;
}
.rating label:hover {
transform: scale(1.1);
}
.rating label::before {
content: "\2606";
display: inline-block;
width: 1.1em;
text-align: center;
}
.rating label.checked::before,
.rating input[type="radio"]:checked ~ label::before {
content: "\2605";
color: #ffc107;
}2. 调整 HTML 顺序（从 star5 到 star1）：
⚠️ 重要提醒：
- 不再需要 onclick="fillStars(n)" 和对应 JS 函数——纯 CSS 即可实现交互反馈；
- label.checked 类可通过 :has() 实现（现代浏览器支持），但为兼容性，推荐直接依赖 :checked ~ label 机制；
- 若需支持「悬停预览」（hover 时临时显示半星/高亮），可额外添加 label:hover, label:hover ~ label 规则；
- 所有 title 属性保留语义化无障碍支持。
最终效果：用户点击最左侧（视觉上）的星星（即 #star1），仅点亮 1 颗；点击第 4 颗（从左数），左侧连续 4 颗金色五角星高亮——完全符合直觉与 UX 规范。
