CSS五星评分：多组评分修改ID后无法选中的问题求助

问题根源 #

1. label与input的ID不匹配：你给input的ID加了前缀（比如1star5），但对应的label的for属性还是原来的star5，点击label找不到对应的radio，自然触发不了选中状态。
2. radio组name重复：所有评分组的radio都用了name="rating"，这会让不同组的radio互斥，只能选一个，完全破坏了多组独立评分的逻辑。
3. HTML结构不规范：第二个<fieldset>没闭合，还直接嵌套在第一个fieldset里，虽然不影响功能，但容易引发其他问题。

修复后的代码 #

CSS（仅微调间距，核心逻辑不变）

fieldset,
label {
  margin: 0;
  padding: 0;
}

body {
  margin: 20px;
}

h1 {
  font-size: 1.5em;
  margin: 10px;
}

.rating {
  border: none;
  float: left;
  margin-right: 30px; /* 增加间距区分多组评分 */
}

.rating>input {
  display: none;
}

.rating>label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "★";
}

.rating>.half:before {
  content: "★";
  position: absolute;
}

.rating>label {
  color: #ddd;
  float: right;
}

.rating>input:checked~label,
.rating:not(:checked)>label:hover,
.rating:not(:checked)>label:hover~label {
  color: #ff0000;
}

.rating>input:checked+label:hover,
.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,
.rating>input:checked~label:hover~label {
  color: #ff8080;
}

HTML（修正ID匹配、分组逻辑、结构问题）

<!-- 第一组评分 -->
<fieldset class="rating">
  <input type="radio" id="1star5" name="rating1" value="5" />
  <label class="full" for="1star5" title="Awesome - 5 stars"></label>
  
  <input type="radio" id="1star4half" name="rating1" value="4 and a half" />
  <label class="half" for="1star4half" title="Pretty good - 4.5 stars"></label>
  
  <input type="radio" id="1star4" name="rating1" value="4" />
  <label class="full" for="1star4" title="Pretty good - 4 stars"></label>
  
  <input type="radio" id="1star3half" name="rating1" value="3 and a half" />
  <label class="half" for="1star3half" title="Meh - 3.5 stars"></label>
  
  <input type="radio" id="1star3" name="rating1" value="3" />
  <label class="full" for="1star3" title="Meh - 3 stars"></label>
  
  <input type="radio" id="1star2half" name="rating1" value="2 and a half" />
  <label class="half" for="1star2half" title="Kinda bad - 2.5 stars"></label>
  
  <input type="radio" id="1star2" name="rating1" value="2" />
  <label class="full" for="1star2" title="Kinda bad - 2 stars"></label>
  
  <input type="radio" id="1star1half" name="rating1" value="1 and a half" />
  <label class="half" for="1star1half" title="Meh - 1.5 stars"></label>
  
  <input type="radio" id="1star1" name="rating1" value="1" />
  <label class="full" for="1star1" title="Sucks big time - 1 star"></label>
  
  <input type="radio" id="1starhalf" name="rating1" value="half" />
  <label class="half" for="1starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>

<!-- 第二组评分 -->
<fieldset class="rating">
  <input type="radio" id="2star5" name="rating2" value="5" />
  <label class="full" for="2star5" title="Awesome - 5 stars"></label>
  
  <input type="radio" id="2star4half" name="rating2" value="4 and a half" />
  <label class="half" for="2star4half" title="Pretty good - 4.5 stars"></label>
  
  <input type="radio" id="2star4" name="rating2" value="4" />
  <label class="full" for="2star4" title="Pretty good - 4 stars"></label>
  
  <input type="radio" id="2star3half" name="rating2" value="3 and a half" />
  <label class="half" for="2star3half" title="Meh - 3.5 stars"></label>
  
  <input type="radio" id="2star3" name="rating2" value="3" />
  <label class="full" for="2star3" title="Meh - 3 stars"></label>
  
  <input type="radio" id="2star2half" name="rating2" value="2 and a half" />
  <label class="half" for="2star2half" title="Kinda bad - 2.5 stars"></label>
  
  <input type="radio" id="2star2" name="rating2" value="2" />
  <label class="full" for="2star2" title="Kinda bad - 2 stars"></label>
  
  <input type="radio" id="2star1half" name="rating2" value="1 and a half" />
  <label class="half" for="2star1half" title="Meh - 1.5 stars"></label>
  
  <input type="radio" id="2star1" name="rating2" value="1" />
  <label class="full" for="2star1" title="Sucks big time - 1 star"></label>
  
  <input type="radio" id="2starhalf" name="rating2" value="half" />
  <label class="half" for="2starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>

关键修改点说明 #

• 每个评分组的radio使用独立的name属性（比如rating1、rating2），确保各组评分互不干扰。
• 所有label的for属性与对应input的id完全一致，保证点击label能正确触发radio选中状态。
• 调整了fieldset的结构，改成并列布局而非嵌套，同时给.rating类加了右边距，让多组评分更清晰。

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