如何在子单选按钮选中时为父label元素设置样式（保留点击性）

这问题我之前也碰到过，确实头疼CSS没有原生父选择器的限制，但其实有两个靠谱的纯CSS方案，完全不用JavaScript，还能保留label的可点击性：

方案1：使用:has()选择器（现代浏览器友好） #

现在大多数现代浏览器已经支持CSS的:has()伪类了，它相当于“父选择器”的替代，可以直接选中包含已选中radio按钮的label元素，完全不用改动你原有的HTML结构。

代码示例 #

你的HTML保持不变：

<label><input type="radio" name="storage" value="128GB">128GB</label>
<label><input type="radio" name="storage" value="256GB">256GB</label>

对应的CSS：

/* 当label内的radio被选中时，为label设置样式 */
label:has(input[type="radio"]:checked) {
  background-color: #e6f7ff;
  border: 1px solid #1890ff;
  padding: 4px 8px;
  border-radius: 4px;
}

这个方案的好处是完全不用调整现有HTML，代码简洁直观，Chrome、Safari、Firefox 121+都已经默认支持了，日常开发足够用。

方案2：调整HTML结构，用相邻兄弟选择器（兼容旧浏览器） #

如果需要兼容一些不支持:has()的旧浏览器（比如老版本Firefox或IE），可以微调HTML结构，把radio按钮移到label外面，同时通过for和id属性绑定两者，这样点击label依然能选中radio，不会丢失可点击性，然后用相邻兄弟选择器+来设置样式。

代码示例 #

调整后的HTML：

<input type="radio" name="storage" id="storage-128" value="128GB">
<label for="storage-128">128GB</label>

<input type="radio" name="storage" id="storage-256" value="256GB">
<label for="storage-256">256GB</label>

对应的CSS：

/* 当radio被选中时，为相邻的label设置样式 */
input[type="radio"]:checked + label {
  background-color: #e6f7ff;
  border: 1px solid #1890ff;
  padding: 4px 8px;
  border-radius: 4px;
}

这个方案兼容性拉满，几乎所有浏览器都支持，唯一的小代价就是需要修改一下HTML结构，但功能完全不受影响。

内容的提问来源于stack exchange，提问作者Sami Al-Subhi