CSS选择器不生效，选中绑定label的单选框时段落未变红如何解决

问题原因 #

你的代码存在两处CSS选择器写法错误：

• .radio1是类选择器，而你要匹配的单选框使用的是id="radio1"，需要换成id选择器#radio1才能正确命中元素
• 你写的.radio-buttons是类选择器，无法匹配到name="radio-buttons"的单选框，如果你原本要隐藏这组单选框，需要调整为属性选择器input[name="radio-buttons"]

修正后代码 #

CSS部分 #

input[name="radio-buttons"] {
  display: none;
}

#radio1:checked ~ p.chapter1 {
  color: red;
}

HTML部分 #

你原有HTML代码的label绑定逻辑完全正确，无需修改，点击label就可以触发单选框的选中状态，CSS修正后就能实现选中单选框对应段落变红的效果。

内容的提问来源于stack exchange，提问作者Denys_newbie