仅用CSS实现单选按钮选中时隐藏指定Div的方法

嘿，我来帮你搞定这个问题！只用CSS确实可以实现，关键在于利用CSS的:checked伪类和兄弟选择器，不过首先得注意DOM元素的顺序——因为CSS只能选择当前元素之后的同级元素，没法往前选，这可能就是你之前用+和~没成功的原因。

第一步：调整HTML结构（很重要） #

首先我们需要把单选按钮和对应的label关联好，同时确保目标div在单选按钮的后面（这样兄弟选择器才能生效）。优化后的HTML结构如下：

<input id="one" type="radio" name="radioGroup" value="1">
<label for="one">One</label>

<input id="two" type="radio" name="radioGroup" value="2">
<label for="two">Two</label>

<div id="mainDiv">
  <p>Hello</p>
</div>

这里给两个单选按钮加上了name="radioGroup"，确保它们是同一组的（只能选一个），同时用for属性把label和对应的input绑定，点击label也能选中单选框，体验更好。

第二步：编写CSS代码 #

接下来用:checked伪类配合通用兄弟选择器~来实现隐藏逻辑：

/* 当id为one的单选框被选中时，隐藏它后面的mainDiv */
#one:checked ~ #mainDiv {
  display: none;
}

• #one:checked：选中状态下的id为one的单选按钮
• ~ #mainDiv：选择当前元素之后所有同级的id为mainDiv的元素

这样一来，当你选中“One”单选按钮时，mainDiv就会被隐藏；选中“Two”或者不选任何单选按钮时，mainDiv都会正常显示。

为什么之前的尝试没成功？ #

大概率是这两个原因：

• 单选按钮和div的DOM顺序不对：如果div在单选按钮前面，兄弟选择器无法生效
• 选择器写法有误：比如用了相邻兄弟选择器+，但#one和#mainDiv之间还有#two和它的label，不是直接相邻的，所以+选不到，这时候就需要用通用兄弟选择器~

备注：内容来源于stack exchange，提问作者Masker112