如何不使用JS通过复选框切换div显示？（现代CSS方案）

AI 小北

2026-6-27

可以实现，用CSS :has() 选择器就行

完全不用JavaScript，借助现代CSS的:has()父选择器就能突破DOM位置限制实现需求。具体方案如下：

首先默认隐藏.docs元素，然后利用:has()检测复选框的勾选状态，当复选框被勾选时，显示.docs：

/* 默认隐藏docs */
.docs {
  display: none;
}

/* 当复选框被勾选时，显示docs */
body:has(#toggle-docs:checked) .docs {
  display: block; /* 可根据需求替换为flex、grid等display值 */
}

原理说明

:has()是CSS的父选择器特性，它允许我们根据某个元素内部的后代元素状态，来为该元素（或该元素下的其他元素）设置样式。这里我们通过body:has(#toggle-docs:checked)匹配包含已勾选复选框的body元素，然后选中其中的.docs元素修改其显示状态，完全不受两个元素在DOM中的位置影响。

完整示例代码

<div class="docs">这是需要切换显示的文档内容</div>

<!-- 中间可放置任意其他页面内容 -->
<p>其他页面内容...</p>

<input type="checkbox" id="toggle-docs">
<label for="toggle-docs">点击切换文档显示状态</label>

.docs {
  display: none;
  padding: 1rem;
  background-color: #f5f5f5;
  border-radius: 4px;
}

body:has(#toggle-docs:checked) .docs {
  display: block;
}