纯CSS实现radio选中时修改label内元素边框颜色不生效问题

你的CSS选择器逻辑写错了。input[type="radio"]:checked .try-2 是后代选择器，作用是匹配被选中的单选框内部、class为try-2的子元素。但<input>是自闭合标签，本身不能嵌套任何内容，而且你的try-2 span是放在和单选框关联的<label>节点里，压根不是input的子元素，这个选择器永远匹配不到目标，样式自然不会生效。

用相邻兄弟选择器+匹配选中单选框后面紧邻的label，再定位label内部的.try-2设置样式即可，纯CSS就能实现，不需要写JavaScript。
修正后的CSS代码如下：

.try-2 {
  border-left: 3px solid pink;
  padding-left: 5px;
}

input[type="radio"]:checked + label .try-2 {
  border-left: 3px solid blue;
}

你原来的HTML结构不需要做任何改动，直接替换CSS就能生效：选中第一个单选框时，CSS对应的span左边框会变为蓝色，切换到第二个单选框时样式自动恢复默认。

• 你的现有HTML结构里，单选框input和绑定的对应label是相邻的兄弟节点，input:checked + label可以精准匹配到当前被选中的单选框对应的label标签
• 后续追加的.try-2是后代选择器，用来定位这个label内部class为try-2的span元素，刚好匹配你要修改样式的目标节点

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