如何仅用CSS实现点击链接时页面淡出，避免:focus触发误判？

嘿，我完全懂你的痛点——用:focus-within确实会在链接被键盘导航聚焦时误触发淡出，这显然不是你想要的交互逻辑。先直接回答你的核心问题：目前CSS原生还没有:active-within或:child-clicked这类伪类，不过我们有几个可靠的方案来实现你要的效果：

方案1：JavaScript + CSS类（兼容性最佳） #

这个方案通过监听链接的点击事件，手动给父容器添加触发过渡的类，完全避开聚焦状态的干扰：

代码实现 #

保留你的HTML结构：

<div style="width:250px;max-width:100%;outline:1px solid #f006;margin:2rem">
  <div class="app" style="background:#edf;padding:1em">
    <p>Lorem ipsum <a href="#">dolor sit amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

添加JavaScript逻辑：

// 获取所有需要触发效果的链接
const links = document.querySelectorAll('.app a');

links.forEach(link => {
  link.addEventListener('click', function(e) {
    // 先阻止默认跳转，等动画完成后再执行（如果需要跳转的话）
    e.preventDefault();
    const appContainer = this.closest('.app');
    
    // 添加触发淡出的类
    appContainer.classList.add('fade-out');
    
    // 等待过渡完成后跳转（时长和CSS过渡保持一致）
    setTimeout(() => {
      window.location.href = this.href;
    }, 1000);
  });
});

补充CSS样式：

.app {
  transition: opacity 1s ease-in;
  opacity: 1;
}

.app.fade-out {
  opacity: 0;
}

优势 #

• 兼容所有现代浏览器，包括旧版浏览器
• 精准控制触发时机：只有点击链接时才会触发淡出，键盘聚焦完全不受影响

方案2：CSS :has() 伪类（简洁但需考虑浏览器支持） #

如果你不想用JS，现在可以利用CSS的:has()伪类来检测子元素的:active状态（点击按下时的状态），从而触发淡出：

代码实现 #

.app {
  transition: opacity 1s ease-in;
  opacity: 1;
}

/* 当.app内部的a标签处于:active状态时，触发淡出 */
.app:has(a:active) {
  opacity: 0;
}

如果希望淡出状态保持到跳转完成，可以改用CSS动画：

.app {
  opacity: 1;
}

.app:has(a:active) {
  animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

注意事项 #

• :has()目前已在Chrome、Edge、Safari稳定支持，Firefox需要手动开启layout.css.has-selector.enabled配置项
• 若需要跳转，仍然建议配合一点点JS延迟跳转，否则浏览器可能会在动画完成前就加载新页面，导致看不到淡出效果

为什么:focus-within会触发？ #

:focus-within会在容器本身或任何子元素获得焦点时触发，包括键盘导航到链接的情况，这就是它不符合你需求的原因——它的触发范围比“点击链接”要广得多。

内容的提问来源于stack exchange，提问作者Nik