HTML / CSS - 在单个单选按钮上使用css应用样式

Question

我有4个单选按钮。 我想在其中一个上使用样式（仅限） - 正确的答案：这是生成的HTML代码：

<p>
<input id="SelectedAnswer" type="radio" value="5" name="SelectedAnswer">
my wrong answer
</p>
<p>
<input id="SelectedAnswer" class="correct-answer" type="radio" value="6" name="SelectedAnswer">

我的正确答案

这是我的CSS，这不起作用：

.correct-answer input[type="radio"] {
    background-color: #FFFF00;
    color: #0000FF;
    font-weight: bold;
}

怎么了 ？

Answer 1

.correct-answer input[type="radio"]表示具有父级元素且具有类correct-answer单选按钮。 但是，这里单选按钮有类correct-answer 。

它应该是

input[type="radio"].correct-answer{}

供你参考，

您正在应用背景颜色，颜色，字体粗细等样式。 这些不会反映在单选按钮上。