为何CSS通用兄弟选择器无法修改目标元素？技术求助

问题原因 #

你的CSS选择器写法错误，违背了通用兄弟选择器~的匹配规则：

• 通用兄弟选择器~的作用是选中同一父元素下、当前元素之后的所有兄弟元素。但你在:checked后重复写了.wrapper .content-input，相当于从被勾选的<input>出发，去寻找它的兄弟元素里的.wrapper .content-input span——而<input>的兄弟元素只有两个<span>，根本不存在.wrapper层级，导致选择器完全匹配不到目标元素。

修正后的代码 #

CSS代码

.wrapper .content-input .botao:checked ~ span {
  display: none;
}

如果只想隐藏第一个显示"off"的<span>，可以调整为：

.wrapper .content-input .botao:checked ~ span:first-of-type {
  display: none;
}

HTML代码

<div class="wrapper">
  <div class="content-input">
    <input class="botao" type="checkbox" />
    <span>off</span>
    <span>on</span>
  </div>
</div>

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