无JS实现复选框与输入框关联显示隐藏的CSS问题求助

你编写的CSS选择器存在层级逻辑错误：

• ~和+兄弟选择器只能选择当前元素之后的同级元素，但你的<input>在各自的wrapper容器内部，无法跨父级直接选中另一个wrapper。
• 要实现"输入框有值时隐藏前面的checkbox容器"，CSS原生没有前向兄弟选择器（无法选中当前元素之前的同级元素），必须借助:has()伪类配合父容器来实现双向控制。

方案一：新增父容器，使用:has()伪类实现双向控制（推荐） #

:has()伪类是目前主流浏览器（Chrome、Firefox 121+、Safari）都支持的特性，可以让父元素根据子元素的状态来设置样式。

修改后的HTML结构：

<div class="container">
  <div class="checkbox-wrapper">
    <input type="checkbox" />
  </div>
  <div class="code-wrapper">
    <input type="text" placeholder="hehe">
  </div>
</div>

对应的CSS代码：

/* 默认状态下两个容器均显示 */
.checkbox-wrapper,
.code-wrapper {
  display: block;
}

/* 复选框选中时，隐藏code-wrapper */
.container:has(.checkbox-wrapper input[type="checkbox"]:checked) .code-wrapper {
  display: none;
}

/* 输入框有值（占位符不显示）时，隐藏checkbox-wrapper */
.container:has(.code-wrapper input:not(:placeholder-shown)) .checkbox-wrapper {
  display: none;
}

方案二：不修改HTML结构（仅能实现单向控制） #

如果坚持不调整HTML结构，仅能完成"复选框选中隐藏code-wrapper"的需求，因为CSS无法选中前序兄弟元素，第二个需求无法通过纯CSS实现：

.checkbox-wrapper,
.code-wrapper {
  display: block;
}

/* 复选框选中时隐藏后续的code-wrapper */
.checkbox-wrapper:has(input[type="checkbox"]:checked) + .code-wrapper {
  display: none;
}

若要实现双向控制，此方案必须配合JavaScript完成。

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