:has() 是唯一能驱动宽度变化的纯 css 方案，因其支持基于后代状态向上选择父元素并实时应用样式，无需 js 监听或切换 class。
为什么 :has() 是唯一能驱动宽度变化的纯 CSS 方案
传统响应式侧边栏依赖 JS 监听子菜单展开/收起来切换 class，再靠 CSS 控制宽度。但 :has() 让你绕过 JS —— 它能「向上选择父元素」，只要子菜单（比如 .submenu）处于展开状态（例如有 data-open="true" 或带 .open 类），就能直接选中它的父级侧边栏并修改其宽度。
注意：这不是伪类触发器，而是实时匹配。只要 DOM 中存在匹配的后代，样式就生效。所以它天然适合「状态驱动布局」这类场景。
常见错误是写成 aside:has(.submenu.open) { width: 280px; } 却没生效——原因通常是：.submenu 不是 aside 的**直接或间接后代**（比如被 ng-if、v-if 或 React Portal 移出层级），或浏览器不支持（Chrome 105+、Safari 15.4+、Firefox 119+，Edge 同 Chrome）。
:has() 中的子选择器必须精确对应真实 DOM 结构
假设你的侧边栏结构是：
<aside class="sidebar"><nav><ul>
<li><a>Dashboard</a></li>
<li>
<a href="#">Settings</a>
<ul class="submenu">
<li><a>Profile</a></li>
</ul>
</li>
</ul></nav></aside>
那么有效写法是：
-
aside:has(.submenu.open)—— ✅ 只要任意.submenu有.open类就触发 -
aside:has(ul.submenu.open)—— ✅ 更明确，避免误匹配其他带.open的元素 -
aside:has(.submenu:not([hidden]))—— ✅ 如果你用hidden属性控制显隐 -
aside:has(.submenu[aria-expanded="true"])—— ✅ 符合 ARIA 实践，且属性值严格匹配
容易踩的坑：aside:has(> .submenu.open) ❌ —— > 在 :has() 内无效，:has() 只接受后代选择器（空格），不支持子代/相邻等关系符。
宽度过渡必须加在父容器上，且不能依赖 display 切换
想让变宽有动画？不能对 display: none ↔ block 做 transition（display 不可过渡）。正确做法是：
- 用
width+transition: width 0.2s ease直接作用于aside - 初始设
width: 64px（窄态），展开时设width: 280px（宽态） - 同时配
overflow: hidden防文字溢出，white-space: nowrap防文本换行破坏布局 - 如果用
flex布局，记得给aside设flex-shrink: 0，否则主内容区会挤压它
示例关键 CSS：
aside {
width: 64px;
transition: width 0.2s ease;
overflow: hidden;
flex-shrink: 0;
}
aside:has(.submenu.open) {
width: 280px;
}
兼容性兜底和 SSR 场景下的注意事项
服务端渲染（如 Next.js、Nuxt）首次加载时，.submenu.open 可能已存在，但 :has() 在旧版 Safari 或 Firefox 中不生效，会导致侧边栏卡在窄态。解决方法：
- 服务端不依赖
:has()控制初始宽度，改用 class（如sidebar--expanded），JS 初始化后移除该 class，交由:has()接管后续状态 - 用
@supports (selector(:has(*)))包裹:has()规则，避免不支持时解析错误 - 不要用
:has()处理关键可访问性逻辑（如焦点管理），它只负责视觉反馈；子菜单的键盘展开/收起仍需 JS 实现
真正麻烦的不是写法，而是确认「展开状态」是否真实存在于 DOM —— 框架的条件渲染、异步加载、Suspense fallback 都可能让 .submenu 暂时不存在，导致 :has() 匹配失败。调试时优先检查 DevTools 中目标元素是否真有对应 class 或属性，而不是怀疑 CSS 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
