如何在checkbox处于:checked状态时修改其父级label的背景色？

原代码问题分析 #

你当前的CSS选择器label + [type="checkbox"]:checked存在两个核心问题：

1. 选择器逻辑错误：复选框是label的子元素，不是相邻兄弟元素，+选择器仅能选中紧跟在label后的同级元素，因此无法匹配目标元素。
2. 样式作用对象错误：即便选择器生效，也是给复选框添加背景色，而非其父级label。

解决方案一：使用:has()伪类（推荐） #

:has()伪类可以直接选中包含特定子元素的父元素，完美适配你当前的DOM结构。

完整代码示例

label {
  display: block;
  background: gray;
  border: 1px solid black;
  margin-bottom: 5px;
  padding: 10px;
  cursor: pointer;
}

/* 选中包含已勾选复选框的label */
label:has([type="checkbox"]:checked) {
  background: yellow;
}

<div class="poll">
  <label class="a"><input type="checkbox" /> Yes</label>
  <label class="a"><input type="checkbox" /> No</label>
</div>

解决方案二：隐藏复选框的场景适配 #

如果需要隐藏复选框但保留label的点击切换功能，只需给复选框添加隐藏样式，:has()选择器依然生效：

label {
  display: block;
  background: gray;
  border: 1px solid black;
  margin-bottom: 5px;
  padding: 10px;
  cursor: pointer;
}

/* 隐藏复选框，不影响label点击触发状态 */
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

label:has([type="checkbox"]:checked) {
  background: yellow;
}

旧浏览器兼容方案 #

若需兼容不支持:has()的旧版浏览器，可调整DOM结构：将复选框放在label外，通过id和for关联，再使用相邻兄弟选择器：

<div class="poll">
  <input type="checkbox" id="yes" />
  <label class="a" for="yes">Yes</label>
  <input type="checkbox" id="no" />
  <label class="a" for="no">No</label>
</div>

input[type="checkbox"]:checked + label {
  background: yellow;
}

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