CSS实现的单选按钮星级评分反向点亮，如何修复为从左到右？

问题原因 #

CSS的同级后续兄弟选择器~只能选中当前元素之后的同级节点，你现有HTML中radio按1星到5星从左到右顺序排列，选中3星时~只能选中右侧的4星、5星对应的label，因此出现反向点亮的效果。

修复步骤 #

步骤1：调整fieldset内元素排序 #

将radio和对应的label按5星到1星的倒序排列，代码如下：

<fieldset class="rating">
  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
</fieldset>

步骤2：修改CSS样式 #

修改.rating相关样式，添加flex布局反转显示，让倒序排列的元素最终显示为1星到5星从左到右的正常顺序：

.rating { 
  border: none;
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: center; /* 和原有页面居中对齐逻辑保持一致 */
}

/* 原有label样式里的float:right注释完全删除，避免布局冲突 */
.rating > label { 
  color: #ddd; 
}

原有星级点亮、hover的CSS选择器逻辑不需要额外修改，调整完以上两处即可实现从左到右的正常评分点亮效果。

内容的提问来源于stack exchange，提问作者CodeHunt