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）的兄弟。您需要选择同级label元素，然后从那里选择后代文本元素。

换句话说，你会改变：

#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的转换，以便在选中复选框之前和之后进行转换。

如果在选中复选框时添加了转换，则只有在取消选中它们时才会进行转换。

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

1 个答案: