CSS:has()实现多选状态样式控制-Golang学习网

本文讲解如何在不改变 HTML 结构的前提下，利用现代 CSS 的 `:has()` 伪类，根据导航栏中复选框（`<input type="checkbox">`）的选中状态，动态控制后续 `

` 和 `

在传统 CSS 中，选择器仅支持向后或同级定位（如 +、~、>），无法“向上查找父元素”或“跨兄弟容器反向影响”。因此，像 nav input:checked + main 这样的写法必然失效——因为

并非 <input> 的相邻兄弟元素，而是位于

外部的后续兄弟节点，二者之间不存在直接的 DOM 邻接关系。

✅ 正确解法是采用 CSS :has() 关系伪类（2023 年起已获 Chrome 105+、Firefox 121+、Safari 15.4+ 原生支持，CanIUse 数据显示全球主流浏览器支持率超 95%）。:has() 允许我们基于子元素/后代元素的状态，向上定位其祖先或兄弟容器，从而实现“条件式布局响应”。

以下为完整可运行示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Checkbox-Driven Layout</title>
  <style>
    /* 当 header 内的 nav 中 checkbox 被选中时，影响紧随其后的 main */
    header:has(nav input:checked) + main {
      background-color: #ffebee;
      padding: 1.5rem;
      border-left: 4px solid #f44336;
      transition: all 0.3s ease;
    }

    /* 同样逻辑扩展至 footer：header 满足条件 → main → footer */
    header:has(nav input:checked) + main + footer {
      background-color: #e8f5e9;
      color: #2e7d32;
      font-weight: bold;
      padding: 1rem;
      text-align: center;
    }

    /* 可选：增强用户体验 —— 为 checkbox 添加视觉反馈 */
    nav input[type="checkbox"] {
      margin-right: 8px;
      transform: scale(1.2);
    }
  </style>
</head>
<body>
  <header>
    <nav>
      &lt;input type=&quot;checkbox&quot; id=&quot;theme-toggle&quot;&gt;
      <label for="theme-toggle">启用高亮模式</label>
      <ul>
        <li>首页</li>
        <li>关于</li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>主内容区域</h1>
    <p>当上方复选框被勾选时，本区域背景与边框将动态变化。</p>
  </main>
  <footer>
    <p>页脚信息 —— 同样受复选框状态驱动</p>
  </footer>
</body>
</html>

? 关键要点说明：

header:has(nav input:checked) + main 表示：“查找一个
，它内部存在被选中的 <input>；若满足，则选取该
的下一个相邻兄弟元素
”。
若需同时影响
，可链式书写为 header:has(...) + main + footer（即
后是
，
后是
）。
所有选择器均严格依赖现有 DOM 顺序，无需添加 ID、class 或 JavaScript，完全符合“不修改页面结构”的原始需求。
强烈建议搭配 transition 实现平滑动画，并为 <input> 添加 id 与关联以提升可访问性（如上例所示）。

⚠️ 注意事项：