如何用CSS或jQuery选中选中项之前所有同级div下的label元素

现有代码问题 #

1. 单选框的name属性取值各不相同，无法形成互斥单选组，用户可同时选中多个选项，要实现单选效果需将所有单选框的name修改为同一个值，比如name="color"。
2. 你之前写的选择器存在两个问题：
   • :checked伪类仅作用于单选框、复选框等表单输入元素，label:checked写法本身无效
   • 所有label分别嵌套在独立的div中，不属于同级元素，直接用兄弟选择器~匹配不到目标label

方案一：使用CSS :has()选择器（现代浏览器通用，兼容Chrome 105+、Firefox 121+、Safari 15.4+） #

不需要修改原有HTML结构，利用反向覆盖逻辑实现需求：

/* 第一步：给所有label默认添加你需要的自定义样式 */
.code > div label {
  color: #f00;
  font-weight: bold;
  /* 其他你要的样式规则 */
}

/* 第二步：选中被勾选单选框所在div的后续所有同级div，将内部label重置为默认样式 */
.code > div:has(input:checked) ~ div label {
  color: #000;
  font-weight: normal;
  /* 其他重置为默认的样式规则 */
}

方案二：旧浏览器兼容方案，需微调HTML结构 #

如果需要兼容不支持:has()的旧版本浏览器，可以将input提取到div外部，作为.code的直接子元素并隐藏，再用兄弟选择器匹配：
调整后的HTML：

<div class="code">
  <input id="yellow" type="radio" name="color" value="1">
  <div>
    <label for="yellow"> yellow</label>
  </div>
  <input id="red" type="radio" name="color" value="2">
  <div>
    <label for="red"> red</label>
  </div>
  <input id="black" type="radio" name="color" value="3">
  <div>
    <label for="black"> black</label>
  </div>
  <input id="green" type="radio" name="color" value="4">
  <div>
    <label for="green"> green</label>
  </div>
</div>

对应的CSS：

/* 隐藏放在外部的input */
.code > input {
  display: none;
}

/* 给所有label默认加自定义样式 */
.code > div label {
  color: #f00;
  font-weight: bold;
}

/* 选中被勾选input后续所有div内的label，重置为默认样式 */
.code > input:checked ~ div label {
  color: #000;
  font-weight: normal;
}

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