请求：基于指定DOM结构实现CSS星级评分功能

你的DOM结构将每个星级单选框包裹在独立的.radio-div中，无法直接用常规兄弟选择器实现「选中某颗星星时，左侧所有星星同步高亮」的效果。以下是适配该结构的完整解决方案，无需修改HTML，仅调整CSS即可实现包含hover预览、选中高亮的完整星级评分功能：

修改后的CSS代码 #

/* 隐藏原生单选框 */
input {
  display: none;
}

/* 隐藏label中的数字文本，保留点击交互 */
.radio-div label {
  visibility: hidden;
  cursor: pointer;
}

.wrapper {
  display: flex;
  align-items: center;
  flex-direction: row-reverse; /* 反转排列顺序，适配兄弟选择器逻辑 */
  gap: 6px; /* 星星间的间距，可按需调整 */
}

/* 用伪元素渲染星星图标 */
.radio-div label:before {
  content: '★';
  visibility: visible;
  font-size: 28px; /* 星星大小，可按需调整 */
  color: #cccccc; /* 默认未选中的灰色 */
  transition: color 0.2s; /* 平滑过渡效果 */
}

/* Hover预览：当前星星及左侧所有星星高亮 */
.wrapper:hover .radio-div:hover ~ .radio-div label:before,
.wrapper .radio-div:hover label:before {
  color: #2ecc71; /* hover时的绿色，可替换为其他颜色 */
}

/* 选中状态：当前星星及左侧所有星星保持高亮 */
.wrapper .radio-div:has(input:checked) ~ .radio-div label:before,
.wrapper .radio-div:has(input:checked) label:before {
  color: #2ecc71; /* 选中后的绿色，可替换为其他颜色 */
}

关键逻辑说明 #

1. 反转排列：通过flex-direction: row-reverse将DOM中最后一个星级（5星）显示在最左侧，利用CSS兄弟选择器~选中当前元素之后的所有DOM节点（对应视觉上的左侧星星）。
2. :has选择器：检测.radio-div内的单选框是否被选中，触发对应星星及左侧星星的高亮样式（主流浏览器均已支持该选择器）。
3. 交互优化：添加鼠标手型、颜色过渡效果，提升用户体验。

保留原HTML结构 #

你的HTML无需任何修改，直接使用即可：

<div class="wrapper">
  <div class="radio-div">
    <input type="radio" name="rating" id="star_1">
    <label for="star_1">1</label>
  </div>
  <div class="radio-div">
    <input type="radio" name="rating" id="star_2">
    <label for="star_2">2</label>
  </div>
  <div class="radio-div">
    <input type="radio" name="rating" id="star_3">
    <label for="star_3">3</label>
  </div>
  <div class="radio-div">
    <input type="radio" name="rating" id="star_4">
    <label for="star_4">4</label>
  </div>
  <div class="radio-div">
    <input type="radio" name="rating" id="star_5">
    <label for="star_5">5</label>
  </div>
</div>

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