使用CSS根据标签文本内容在HTML中改变字体颜色的方法

Question

所以我有一个单选按钮，文本为“是”和“否”，如果选择其中任何一个，我希望字体颜色会改变。

• 是（绿色）
• 否（红色）

以下是html代码：

<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
  <asp:ListItem Text="否" Value="False" />
  <asp:ListItem Text="是" Value="True" />
</asp:RadioButtonList>

我在css中有以下代码，可以改变所选单选按钮的标签：

input[type="radio"]:checked + label { 字体粗细：加粗！重要； }

Answer 1

您可以使用块括号来定位任何属性，包括“Text”属性：

input[text="Yes"]:checked + label {
  color: green;
}

input[text="No"]:checked + label {
  color: red;
}

<input type="radio" text="Yes" name="select" id="yes">
<label for="yes">Yes</label>
<input type="radio" text="No" name="select" id="no">
<label for="no">No</label>