因为:has()只能向上匹配祖先元素，若复选框不在侧边栏同一父容器内（如分处header与aside），则aside:has(#toggle:checked)无法匹配；须将checkbox与sidebar置于同一父元素下，如.app-layout:has(#sidebar-toggle:checked) .sidebar { width: 64px; }。
为什么直接用 :has(:checked) 无法触发侧边栏收起？
因为 :has() 是父选择器，只能向上查找祖先元素，而单选/复选框通常不在侧边栏容器内部——它往往在 header、顶部导航或独立控件区。如果 checkbox 在侧边栏外，aside:has(#toggle:checked) 永远不匹配，样式不会生效。
解决思路是把控制开关（<input type="checkbox">）和侧边栏放在同一个父容器下，让 :has() 能“看到”它。
- 必须确保 checkbox 和 sidebar 是同一父元素的子元素（同级或 checkbox 是 sidebar 的兄弟节点）
- 不能把 checkbox 放在
<header></header>里再指望控制<aside></aside>，除非它们共用一个外层<div class="layout"> <li> <code>:has()不支持跨 Shadow DOM 或 iframe，纯 CSS 方案仅限同文档流
正确 HTML 结构与基础 CSS 写法
结构上推荐将 checkbox 隐藏、作为控制桩，用 label 触发，sidebar 紧跟其后：
<div class="app-layout"> <input type="checkbox" id="sidebar-toggle" hidden><label for="sidebar-toggle" class="toggle-btn">☰</label> <aside class="sidebar">...</aside><main class="content">...</main> </div>
然后用 :has() 控制 sidebar 宽度和 transform：
.app-layout:has(#sidebar-toggle:checked) .sidebar {
width: 64px;
overflow: hidden;
}
.app-layout:has(#sidebar-toggle:checked) .sidebar * {
visibility: hidden;
}
.app-layout:has(#sidebar-toggle:checked) .sidebar::before {
content: "≡";
display: block;
padding: 16px;
color: #333;
text-align: center;
}
- 收起时靠
width+overflow: hidden截断内容，比display: none更利于过渡动画 - 不要对
.sidebar直接设display: none，否则:has()无法检测到子元素状态变化（某些浏览器下会失效） -
::before伪元素用于显示收起后的图标，避免 DOM 中冗余占位元素
动画卡顿或不触发的常见原因
:has(:checked) 本身不阻塞渲染，但动画表现差往往来自属性选择不当：
- 避免对
width做过渡：flex 容器中 width 可能被 flex-basis 覆盖，改用flex-basis或min-width - 收起时若用
transform: translateX(-100%)，需确保父容器overflow: hidden，否则侧边栏仍可滚动出现 - Chrome 110+ 和 Safari 15.4+ 支持
:has()，Firefox 仍不支持（截至 2024 年中），必须加降级：用 JS 切 class 或提供@supports selector(:has(*))包裹 - 移动端点击 label 有时失焦，建议加
touch-action: manipulation到.toggle-btn
如何兼容 Firefox 或需要 JS 回退？
纯 CSS 方案在 Firefox 下完全无效，不能只依赖 :has()。最简回退是用 JS 监听 click 并切换 class：
const toggle = document.getElementById('sidebar-toggle');
const sidebar = document.querySelector('.sidebar');
toggle.addEventListener('change', () => {
document.body.classList.toggle('sidebar-collapsed', toggle.checked);
});
对应 CSS 写两套：
.sidebar { transition: width 0.3s ease; }
@media (prefers-reduced-motion) {
.sidebar { transition: none; }
}
/* CSS-only path */
.app-layout:has(#sidebar-toggle:checked) .sidebar {
width: 64px;
}
/* JS fallback path */
body.sidebar-collapsed .sidebar {
width: 64px;
}
注意：JS 修改的是 body 类，而非直接操作 sidebar，这样能保持 CSS 优先级一致，也方便全局状态管理。
真正麻烦的不是写法，而是忘记检查浏览器支持表；:has() 在生产环境用，必须配 @supports 或 feature detect，否则 Firefox 用户看到的是一直展开的侧边栏，且无任何报错提示。
