如何实现单选框选中时其包裹label的背景色变化？

你的需求是点击label内的单选框时，让label的背景色变化，原代码的问题在于CSS选择器错误——你试图用子元素input:checked反向选择父元素label，但常规CSS没有这种语法，不过可以通过以下两种方案解决：

方案一：使用CSS :has()伪类（推荐，现代浏览器支持） #

无需修改HTML结构，仅修正CSS选择器即可：

修正后的CSS代码 #

.radio-label {
  width: 100%;
  height: 2.5rem;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 0.9rem;
  background-color: #f5f5f5;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease; /* 添加过渡动画，效果更流畅 */
}

.radio-label:hover {
  background-color: #e5e5e5;
  color: var(--black);
}

.radio-label input {
  height: 1rem;
  width: 1rem;
  margin-right: 0.6rem;
  cursor: pointer;
  border: none;
}

/* 关键修正：用:has()选中包含已勾选input的label */
.radio-label:has(input:checked) {
  background-color: var(--orange);
  color: var(--black);
}

对应的HTML代码（无需修改） #

<label class="radio-label">
  <span>Test</span>
  <input type="radio" name="test" id="test1" />
</label>

方案二：兼容旧浏览器（不使用:has()） #

如果需要兼容不支持:has()的旧版浏览器，可调整HTML结构，通过for属性关联input和label，配合相邻兄弟选择器实现：

调整后的HTML代码 #

<input type="radio" name="test" id="test1" />
<label class="radio-label" for="test1">
  <span>Test</span>
</label>

对应的CSS代码 #

.radio-label {
  width: 100%;
  height: 2.5rem;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 0.9rem;
  background-color: #f5f5f5;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.radio-label:hover {
  background-color: #e5e5e5;
  color: var(--black);
}

input[type="radio"] {
  height: 1rem;
  width: 1rem;
  margin-right: 0.6rem;
  cursor: pointer;
  border: none;
}

/* 相邻兄弟选择器：选中已勾选input后的label */
input[type="radio"]:checked + .radio-label {
  background-color: var(--orange);
  color: var(--black);
}

补充说明 #

• 方案一的:has()伪类已被Chrome、Firefox（121+）、Safari等主流现代浏览器支持，写法简洁且无需改动HTML结构。
• 方案二兼容性更强，适合需要支持旧版浏览器的场景，通过for属性保证点击label仍能触发单选框状态切换。

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