求助：使用Radio Input通过CSS控制Div显示的代码无效

我看了你的代码，问题主要出在两个地方，咱们一步步来修复：

1. HTML语法错误导致关联失效 #

你的<label>标签里的for属性多写了一个双引号：

<label for="btn_commandprompt"" >

这个语法错误会让浏览器解析label时出现异常，可能导致单选框和label的关联失效——点击label的时候没法选中单选框，自然CSS的:checked状态就触发不了。

2. CSS的display属性值不完整 #

你写的display: ...的内容没有补充具体的可见值（比如block、flex），浏览器不知道要将元素改成什么显示状态。

修复后的完整代码 #

HTML：

<input type="radio" name="menu" id="btn_commandprompt" value="1">
<label for="btn_commandprompt">
  <div id="btn_commandprompt_design"></div>
</label>
<div id="commandprompt"></div>

CSS：

#commandprompt{ 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  display: none; 
  /* 可以加个背景色方便测试效果 */
  background: #eee;
}

#btn_commandprompt:checked ~ #commandprompt{ 
  display: block; 
}

原理说明 #

CSS的~是后续兄弟选择器，它能选中和目标元素同级、且在目标元素之后的所有匹配元素。你的结构里#btn_commandprompt和#commandprompt是同级元素，且div在单选框后面，所以这个选择器是有效的，只要修正语法错误并补全display值，就能正常触发显示效果。

如果点击label还是没反应，可以检查下#btn_commandprompt_design有没有设置宽高——不然label可能是空的，没法被点击哦~

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