如何用CSS选中单选按钮组中已选中项之前的所有选项？

当然可以实现！不过有个小前提：你需要调整一下单选按钮的HTML结构，因为CSS目前还没办法选中当前元素前面的兄弟元素，只能选择后面的。不过只要结构调整合理，纯CSS完全能搞定你的需求。

实现思路 #

我们把单选按钮按值从大到小的顺序写在HTML里，然后用CSS的flex布局把显示顺序反转成用户看到的从小到大。这样就能利用:checked选择器结合通用兄弟选择器~，选中所有值小于当前选中项的按钮。

完整代码示例 #

HTML 结构

<div class="rating-group">
  <!-- 按值从高到低排列，后续用CSS反转显示顺序 -->
  <input type="radio" name="rating" id="rating-3" value="3">
  <label for="rating-3">3</label>
  
  <input type="radio" name="rating" id="rating-2" value="2">
  <label for="rating-2">2</label>
  
  <input type="radio" name="rating" id="rating-1" value="1">
  <label for="rating-1">1</label>
</div>

CSS 样式

.rating-group {
  /* 反转显示顺序，让用户看到1、2、3的正常顺序 */
  display: flex;
  flex-direction: row-reverse;
  gap: 1rem;
  align-items: center;
}

/* 隐藏原生单选按钮，用label实现可视化交互 */
.rating-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rating-group label {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* 核心样式：选中当前项及所有更小值的按钮 */
.rating-group input[type="radio"]:checked ~ label {
  background-color: red;
  color: #fff;
  border-color: red;
}

原理说明 #

• 结构调整：HTML里的单选按钮按值从大到小排列，再通过flex-direction: row-reverse反转显示，用户看到的还是1、2、3的常规顺序。
• 选择器逻辑：input:checked ~ label是通用兄弟选择器，会匹配当前选中单选按钮之后的所有同级label元素。因为我们的HTML结构是从大到小排列，所以选中高值按钮时，后面的label正好对应更小的值，从而实现同步变色。
• 交互反馈：隐藏原生单选按钮后，用label承载样式和点击事件，保证交互体验正常。

注意事项 #

如果没办法调整HTML结构的话，纯CSS确实做不到——毕竟CSS没有父选择器，也没有向前选择兄弟元素的能力。但只要能调整结构，这个方案完全能满足你的需求。

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