如何从单选按钮更改文本的颜色

Question

我正在进行分段切换，并试图使用transition来更改文本的颜色，但由于某些原因，文本颜色更改不起作用。

https://jsfiddle.net/zp2z2bvw/1/

这是CSS样式：

#Favorites_Switch:checked ~ #Selected_Container {
position: absolute;
left: 50%;
transition: all .15s ease;
border-radius: 0px 5px 5px 0px;
}
#Favorites_Switch:checked ~ #Favorites_Text {
color: #38D1A9;
transition: color .2s ease;
}
#Favorites_Switch:checked ~ #All_Text {
color: #FFFFFF;
transition: color .2s ease;
}
#All_Switch:checked ~ #Selected_Container {
position: absolute;
left: 0%;
transition: all .15s ease;
}

这是html。

<div id="Segmented_Control">
    <input type="radio" name="Switch" value="All" id="All_Switch" class="Radio_Switch"/>
    <input type="radio" name="Switch" value="Favorites" id="Favorites_Switch" class="Radio_Switch"/>
    <div id="Selected_Container">
    </div> <!-- Selected Container -->
    <label for="All_Switch">
        <div class="Switch_Containers" id="All_Container">
            <p class="Switch_Text" id="All_Text">All</p> <!-- All Switch -->
        </div> 
    </label> <!-- All Switch Label -->
    <label for="Favorites_Switch">
        <div class="Switch_Containers" id="Favorites_Container">
            <p class="Switch_Text" id="Favorites_Text">Favorites</p> <!-- Favorites Switch -->
        </div> <!-- Favorites Container -->
    </label>
</div> <!-- Segmented Control -->

我不明白为什么当我按下标签div时字体颜色不会改变。

Answer 1

它不起作用，因为input复选框元素与文本元素（#Favorites_Text/#All_Text）不是同级元素。您需要选择同级label元素，然后从中选择子体文本元素。

换句话说，你会改变：

#Favorites_Switch:checked ~ #Favorites_Text { ... }
#Favorites_Switch:checked ~ #All_Text { ... }

至：

#Favorites_Switch:checked ~ label #Favorites_Text { ... }
#Favorites_Switch:checked ~ label #All_Text { ... }

更新示例

#Favorites_Switch:checked ~ label #Favorites_Text {
  color: #38D1A9;
}
#Favorites_Switch:checked ~ label #All_Text {
  color: #FFFFFF;
}

附带说明一下，我还将转换添加到元素.Switch_Text中，以便在选中复选框之前和之后进行转换。

如果在选中复选框时添加了转换，则只有在取消选中复选框的情况下才会发生转换。