怎样利用CSS伪类:target-within感知锚点目标的激活状态？-css教程-PHP中文网

:target-within 尚未被任何主流浏览器实现，是 CSS Selectors Level 4 中的实验性伪类；其设计意图是让祖先元素感知后代是否为当前 :target，但目前必须用 JavaScript 监听 hashchange 并手动添加 class 来模拟。

怎样利用css伪类:target-within感知锚点目标的激活状态？

:target-within 目前（截至 2024 年中）**尚未被任何主流浏览器实现**，属于 CSS Selectors Level 4 提案中的实验性伪类，不能直接用于生产环境。

为什么查不到 `:target-within` 的效果？

你尝试写 a[href="#section1"] + div:target-within 却毫无反应，不是写法错，是浏览器根本不识别它。Chrome、Firefox、Safari 均未启用该伪类——MDN 明确标注为 “Not supported”，Can I Use 上显示为 “No support”。它和 :has() 不同，后者已落地（Chrome 105+），而 :target-within 连草案实现都未进入稳定通道。

`:target-within` 的设计意图是什么？

它的本意是解决一个真实痛点：当点击锚点链接（如）后，目标元素（id="content"）获得 :target 状态，但若想让它的某个**祖先容器**（比如包裹它的

）也响应样式变化，原生 CSS 没有向上选择的能力。于是提案了 :target-within，使祖先能“感知”其后代是否为当前 :target。

例如，理想中可这样写：

section:target-within {
  background-color: #f0f8ff;
  animation: highlight 0.3s ease;
}

但这段代码目前只是纸面逻辑，不会生效。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

实际项目中怎么替代 `:target-within`？

必须用 JavaScript 补位，核心思路是监听 URL hash 变化，手动添加/移除 class：

监听 hashchange 事件，或在页面加载时检查 location.hash
用 document.querySelector(location.hash) 获取目标元素（注意处理空值）
向上遍历其父级，对符合条件的容器（如 section、.card）添加 target-active 类
CSS 中用 section.target-active 实现等效样式

简例：

function updateTargetWithin() {
  const hash = location.hash.slice(1);
  if (!hash) return;
  const target = document.getElementById(hash);
  if (!target) return;
  let parent = target.parentElement;
  while (parent && !parent.matches('section, .container')) {
    parent = parent.parentElement;
  }
  if (parent) {
    document.querySelectorAll('section, .container').forEach(el => el.classList.remove('target-active'));
    parent.classList.add('target-active');
  }
}
window.addEventListener('hashchange', updateTargetWithin);
updateTargetWithin(); // 初始化

真正要注意的是：伪类名看着很美，但浏览器没实现就是零。别在调试器里反复检查拼写，先查 Can I Use；需要向上响应锚点状态时，JS 是唯一可靠路径——而且得自己控制 class 清除时机，否则多个锚点切换可能残留状态。