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

Question

我正在制作一个分段开关，我正在尝试使用过渡来更改文本的颜色，但由于某种原因，文本颜色更改不起作用。

这是 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) 不是兄弟元素。您需要 select 兄弟 label 元素，然后 select 从那里的后代文本元素。

换句话说，你会改变：

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

至：

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

Updated Example

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

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

附带说明一下，我还向元素添加了过渡 .Switch_Text，以便过渡发生在选中复选框之前和之后。

如果在选中复选框时添加过渡，则只有在取消选中时才会发生过渡。

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

How do I change the color of text from a radio button?

html

css

css-transitions