如何用CSS实现仅指定子元素触发父元素:focus-within关闭侧边栏

开发者阿泽

2026-10-4

解决方案

实现思路

弃用通用的:focus-within伪类，改用CSS :has() 父选择器，精准匹配「内部.link1元素获得焦点」的.parent容器，只有这种场景下才触发侧边栏关闭逻辑
删除原代码中无效的.parent:focus-within + a.link1规则：.link1是.parent的子元素而非相邻兄弟元素，该选择器永远无法匹配到元素，无实际作用

修改后完整代码

HTML代码

<a class="open" href="#">open menu</a>
<div class="parent">
  <a class="link1" href="#">link1</a>
  <a class="link2" href="#">link2</a>
  <div class="menu2">...123</div>
  <a class="link3" href="#">link3</a>
  <div class="menu3">...456</div>
</div>

CSS代码

.parent{
  width:200px;
  height:100%;
  position:fixed;
  left:-30em;
  background:lightyellow;
}
/* 侧边栏打开逻辑保持不变 */
.open:focus + .parent,.parent:hover{
  left:0;
}
/* 仅当.link1聚焦时才触发侧边栏关闭，替换原:focus-within规则 */
.parent:has(.link1:focus){
  left:-20em;
}