单选按钮星级评分选中后星星不变色问题排查求助

嘿，我来帮你搞定这个星级评分的问题！你提到用单选按钮实现了两套评分系统，期望点击星星时，当前星星及后方所有星星变黄，还怀疑是::before伪元素的问题，咱们一步步来排查解决：

首先，先确认你的HTML结构是否正确（这是基础！） #

两套评分系统必须用不同的name属性分组，而且每个单选按钮的id要唯一，和对应的label的for属性匹配，比如：

<!-- 第一套评分 -->
<div class="rating">
  <input type="radio" id="star5" name="rating-set1" value="5">
  <label for="star5"></label>
  <input type="radio" id="star4" name="rating-set1" value="4">
  <label for="star4"></label>
  <input type="radio" id="star3" name="rating-set1" value="3">
  <label for="star3"></label>
  <input type="radio" id="star2" name="rating-set1" value="2">
  <label for="star2"></label>
  <input type="radio" id="star1" name="rating-set1" value="1">
  <label for="star1"></label>
</div>

<!-- 第二套评分 -->
<div class="rating">
  <input type="radio" id="star5-2" name="rating-set2" value="5">
  <label for="star5-2"></label>
  <input type="radio" id="star4-2" name="rating-set2" value="4">
  <label for="star4-2"></label>
  <input type="radio" id="star3-2" name="rating-set2" value="3">
  <label for="star3-2"></label>
  <input type="radio" id="star2-2" name="rating-set2" value="2">
  <label for="star2-2"></label>
  <input type="radio" id="star1-2" name="rating-set2" value="1">
  <label for="star1-2"></label>
</div>

如果name重复，两套评分会互相干扰，点击一个会影响另一个，这是很容易踩的坑！

然后是CSS的核心逻辑（解决你说的::before问题） #

你需要用兄弟选择器来关联选中的单选按钮和对应的label伪元素，实现“点击星星后，当前及后方星星变黄”的效果：

/* 重置评分容器样式 */
.rating {
  border: none;
  float: left;
  margin: 0;
  padding: 0;
}

/* 隐藏原生单选按钮 */
.rating input {
  display: none;
}

/* 默认的空心星星样式 */
.rating label:before {
  content: "\2606"; /* 空心星的Unicode编码 */
  font-size: 2.5rem;
  color: #ccc;
  margin: 0 0.15rem;
  cursor: pointer;
}

/* 关键：选中后，当前星星及后方所有星星变成黄色实心星 */
.rating input:checked + label:before,
.rating input:checked ~ label:before {
  content: "\2605"; /* 实心星的Unicode编码 */
  color: gold;
}

这里的关键是两个选择器：

• input:checked + label:before：选中当前单选按钮紧邻的那个label的伪元素（也就是你点击的星星）
• input:checked ~ label:before：选中当前单选按钮后面所有的label的伪元素（也就是后方的星星）
  把这两个组合起来，就实现了你要的效果！

可能的排查点 #

1. 你之前的CSS是不是没切换content？只改颜色的话，空心星变黄色还是空心，看起来不对，所以要把content从空心星换成实心星。
2. 是不是兄弟选择器用错了？比如用了+但没加~，导致只有点击的星星变黄，后方的没变化。
3. 有没有给label设置合适的尺寸？如果label太小，点击区域会有问题，不过你提到能点击，这个可能不是主要问题。

按上面的代码调整后，应该就能正常工作啦！

内容的提问来源于stack exchange，提问作者Mr. PV