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{}

供您参考，

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