基于CSS与Radio Button实现星级评分的hover及选中状态异常排查

由于HTML结构由WordPress自动生成，我们只能通过CSS调整样式来实现星级评分的交互需求。核心思路是利用:has()选择器和兄弟选择器的反向逻辑，实现选中和hover时当前及之前星级的高亮效果。

最终CSS代码 #

.form-group {
  display: flex;
}

.form-check-inline .rating {
  display: none;
}

.form-check-inline span {
  padding-right: 2%;
  cursor: pointer;
  color: transparent;
}

/* 默认显示空心星 */
.form-check-inline span:before {
  content: '\2606';
  color: gold;
}

/* 选中状态处理：当前及之前的星变为实心 */
.form-group:has(.rating:checked) .form-check-inline span:before {
  content: '\2605';
}
/* 将选中项之后的星重置为空心 */
.form-group .form-check-inline:has(.rating:checked) ~ .form-check-inline span:before {
  content: '\2606';
}

/* Hover状态处理：当前及之前的星变为实心 */
.form-group:hover .form-check-inline span:before {
  content: '\2605';
}
/* 将hover项之后的星重置为空心 */
.form-group:hover .form-check-inline:hover ~ .form-check-inline span:before {
  content: '\2606';
}

/* 确保hover状态优先级高于选中状态 */
.form-group:hover .form-check-inline span:before {
  content: '\2605' !important;
}
.form-group:hover .form-check-inline:hover ~ .form-check-inline span:before {
  content: '\2606' !important;
}

各需求实现说明 #

1. 选中第二颗星时第一颗也实心：
   当任意单选框被选中时，先通过.form-group:has(.rating:checked)让所有星级变为实心，再用兄弟选择器把选中项之后的星级重置为空心。选中第二颗时，第三颗会被重置为空心，第一颗保持实心，满足需求。

2. 鼠标悬停第三颗星时前两颗也实心：
   鼠标hover整个星级容器时，先让所有星级变为实心，再把hover项之后的星级重置为空心。悬停第三颗时没有后续星级，所以第一、二、三颗都保持实心；悬停第二颗时，第三颗会被重置为空心，第一、二颗保持实心，符合交互逻辑。

3. 选中第三颗后hover第二颗，移开后恢复原状态：
   通过!important让hover样式优先级高于选中样式，hover第二颗时第三颗会被重置为空心，仅前两颗实心；移开鼠标后hover样式失效，选中状态的样式重新生效，第三颗恢复实心状态。

注意事项 #

:has()选择器目前已被Chrome、Firefox 121+、Safari等主流浏览器支持，若需兼容更旧的浏览器，可能需要额外的polyfill，但针对WordPress的常规用户群体，该方案足够适用。

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