:has() 不能用于响应式侧边栏宽度联动，因它不支持在@media中使用、无法影响祖先/兄弟元素盒模型、且不能替代flex布局逻辑；应改用:checked + 相邻选择器配合flex-direction与flex属性实现。
:has() 不能直接用于响应式侧边栏的宽度联动控制——它无法在媒体查询断点内动态响应 input:checked 状态来修改主体区域宽度，更不支持在 @media 规则中嵌套 :has()。这是当前所有浏览器（Chrome 125、Safari 17.5、Firefox 126）的明确限制。
为什么 :has() 在侧边栏宽度联动中会失效
你可能想写类似这样的规则：
@media (max-width: 768px) {
.layout:has(#sidebar-toggle:checked) .main-content {
width: calc(100% - 280px);
}
}
但该写法完全无效，原因有三：
-
:has()不允许出现在@media内部，浏览器会直接忽略整条规则 -
:has()选择器本身不能作为“触发器”去影响祖先或兄弟元素的盒模型尺寸（如width、flex），它只适合控制显隐、颜色、transform 等可继承/可动画属性 - 侧边栏和主内容区若用
display: flex布局，宽度应由父容器的flex分配逻辑决定，而非靠:has()手动计算
真正可行的纯 CSS 宽度联动方案
必须放弃 :has()，改用 :checked + 相邻/兄弟选择器直接控制布局容器的 flex 或 grid 行为：
- 确保
<input id="sidebar-toggle">与.layout同级且在它前面（DOM 顺序关键） - 把侧边栏和主内容区包进同一个
.layout容器，用display: flex - 用
#sidebar-toggle:checked ~ .layout触发整个布局重排，而非只改.main-content - 小屏下默认设
.layout { flex-direction: column; }，展开时切回row并固定侧边栏宽度
示例关键 CSS：
#sidebar-toggle:checked ~ .layout {
flex-direction: row;
}
.layout {
display: flex;
flex-direction: column; /* 移动端默认竖排 */
}
.sidebar {
width: 280px;
flex-shrink: 0;
}
.main-content {
flex: 1; /* 自适应剩余空间，无需手动 calc */
}
容易被忽略的兼容性与 DOM 结构陷阱
即使写对了 :checked ~ .layout，以下三点仍会导致宽度不联动：
-
<input>被包裹在<div> 或其他非直接父容器里，破坏了兄弟选择器路径<li>用了 <code>position: fixed的侧边栏脱离文档流，.main-content无法通过flex感知其存在，此时必须用margin-left或transform避让，而非依赖 flex 分配 - 未加
will-change: transform且主内容区有滚动，部分安卓 WebView 下transform动画会卡顿，间接让人误判“宽度没变”
最稳妥的做法是：小屏下用 flex-direction: column 让侧边栏在上、内容在下；需要抽屉效果时，只对侧边栏用 transform: translateX()，主体保持 flex: 1 占满视口——宽度联动这件事，交给 flex 布局引擎，别交给 :has()。
