:target-within 尚未被任何主流浏览器实现，是 CSS Selectors Level 4 中的实验性伪类；其设计意图是让祖先元素感知后代是否为当前 :target，但目前必须用 JavaScript 监听 hashchange 并手动添加 class 来模拟。
: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 的设计意图是什么？
它的本意是解决一个真实痛点：当点击锚点链接（如 <a href="#content"></a>）后，目标元素（id="content"）获得 :target 状态，但若想让它的某个**祖先容器**（比如包裹它的 <section></section>）也响应样式变化，原生 CSS 没有向上选择的能力。于是提案了 :target-within，使祖先能“感知”其后代是否为当前 :target。
例如，理想中可这样写：
立即学习“前端免费学习笔记（深入）”；
section:target-within {
background-color: #f0f8ff;
animation: highlight 0.3s ease;
}
但这段代码目前只是纸面逻辑，不会生效。
实际项目中怎么替代 :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 清除时机，否则多个锚点切换可能残留状态。
