如何用CSS伪类实现星级评分点击后保持黑色（仅HTML/CSS）？

要实现点击星星后保持黑色的效果，核心是使用CSS的:checked伪类——这个伪类专门匹配处于选中状态的单选框（radio）或复选框（checkbox），能在选中后持续应用样式，完全满足纯HTML/CSS实现的需求。

第一步：修正HTML结构（添加必要属性） #

首先给所有单选框加上相同的name属性，确保它们互斥（同一时间只能选中一个）：

<div class="rating-stars" id="rating-stars-features">
  <input class="rating-radio visuallyhidden" type="radio" id="rating-features-1" name="rating-features" value="1" />
  <input class="rating-radio visuallyhidden" type="radio" id="rating-features-2" name="rating-features" value="2" />
  <input class="rating-radio visuallyhidden" type="radio" id="rating-features-3" name="rating-features" value="3" />
  <label class="rating-star" for="rating-features-1">★</label>
  <label class="rating-star" for="rating-features-2">★</label>
  <label class="rating-star" for="rating-features-3">★</label>
</div>

第二步：编写CSS样式 #

基础样式（隐藏输入框、设置星星默认外观）

/* 隐藏单选框的通用样式 */
.visuallyhidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.rating-stars {
  display: flex;
  gap: 6px; /* 星星之间的间距 */
}

.rating-star {
  font-size: 28px;
  color: #cccccc; /* 默认灰色未选中状态 */
  cursor: pointer;
  transition: color 0.2s ease; /* 过渡动画提升体验 */
}

选中后保持黑色的核心样式

通过:checked伪类匹配选中的单选框，再通过兄弟选择器找到对应的label，设置黑色：

/* 选中对应单选框时，匹配的星星变黑 */
#rating-features-1:checked ~ label[for="rating-features-1"],
#rating-features-2:checked ~ label[for="rating-features-2"],
#rating-features-3:checked ~ label[for="rating-features-3"] {
  color: #000000;
}

进阶优化：实现“选中第n颗星，前面所有星变黑” #

如果需要更符合常规星级评分的交互（比如选3星时，3颗星都变黑），可以调整HTML结构并修改CSS：

修改后的HTML（反向排列单选框与标签）

<div class="rating-stars" id="rating-stars-features">
  <input class="rating-radio visuallyhidden" type="radio" id="rating-features-3" name="rating-features" value="3" />
  <label class="rating-star" for="rating-features-3">★</label>
  <input class="rating-radio visuallyhidden" type="radio" id="rating-features-2" name="rating-features" value="2" />
  <label class="rating-star" for="rating-features-2">★</label>
  <input class="rating-radio visuallyhidden" type="radio" id="rating-features-1" name="rating-features" value="1" />
  <label class="rating-star" for="rating-features-1">★</label>
</div>

对应的CSS（包含悬停预览效果）

.rating-stars {
  display: flex;
  flex-direction: row-reverse; /* 反向排列，视觉上仍为1-3的顺序 */
  justify-content: flex-end;
}

/* 选中某颗星时，它后面的所有星（视觉上的前面星星）都变黑 */
.rating-radio:checked ~ .rating-star {
  color: #000000;
}

/* 鼠标悬停时，当前星及后面的星变黑（预览效果） */
.rating-star:hover,
.rating-star:hover ~ .rating-star {
  color: #000000;
}

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