不使用label时如何实现radio单选框选中状态下对应文字颜色修改

选择器不生效原因 #

你写的+是CSS相邻兄弟选择器，只能匹配和当前元素同级、紧接在后面的元素。你的radio input是.item-3 段落的子元素，二者是父子关系而非兄弟关系，自然不可能匹配到父元素，样式当然不会生效。

实现方案 #

方案1：使用CSS :has() 伪类（推荐）

目前所有现代浏览器都支持has()伪类，可以直接匹配「内部包含选中状态单选框的.item-3元素」，写法最简洁，也不需要修改现有HTML结构：

/* 匹配包含已选中radio的.item-3段落 */
.item-3:has(input[type="radio"]:checked) {
  color: red;
}

Chrome 105+、Firefox 121+、Safari 15.4+都原生支持该属性，覆盖了95%以上的全球用户场景。

方案2：兼容旧浏览器的实现

如果需要适配不支持:has()的旧版本浏览器，只需要给文字加个无意义的span标签包裹，用相邻兄弟选择器匹配选中radio后面的span即可，全程不需要用到label标签：
修改后的HTML：

<p class="item-3">
  <input id="fid-1" type="radio" name="globalType">
  <span>Hey</span>
</p>

对应CSS：

.item-3 input[type="radio"]:checked + span {
  color: red;
}

该写法兼容所有主流旧版本浏览器。

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