使用纯css单击单选按钮时，改变标签内元素的边框颜色

Question

我试图改变一个span元素的边框颜色，当单选按钮被选中时。但是我的代码不工作。下面是我的代码的一个简单版本:

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

<input type="radio" id="html-css" name="fav_language" value="HTML-CSS">
<label for="html-css">
<span class="try-1">HTML</span>
<span class="try-2">CSS</span>
</label><br>
<input type="radio" id="js" name="fav_language" value="JS">
<label for="js">JS</label><br>

Answer 1

您的问题是，span不是输入的兄弟姐妹。输入的兄弟是label。您必须将选择器更改为:input[type="radio"]:checked ~ label span

.try-2 {
border-left: 3px solid pink;
padding-left: 5px;
}
input[type="radio"]:checked ~ label span {
border-left: 3px solid blue;
}

<input type="radio" id="html-css" name="fav_language" value="HTML-CSS">
<label for="html-css">
<span class="try-1">HTML</span>
<span class="try-2">CSS</span>
</label><br>
<input type="radio" id="js" name="fav_language" value="JS">
<label for="js">JS</label><br>