:target-within 伪类不存在，浏览器直接忽略；唯一现代替代是 :has(:target)，要求目标元素为容器后代且需注意 ssr 和动态渲染限制。
:target-within 根本不存在，别白费力气写它
截至 2026 年 6 月，:target-within 不是可用的 CSS 伪类。所有主流浏览器（Chrome、Firefox、Safari）均未实现它，连实验性 flag 都已移除。你写的 section:target-within 规则会被浏览器直接忽略——不报错、不 fallback、也不生效。这不是兼容性问题，是“语法根本未被识别”的问题。
为什么 :has(:target) 是唯一可行的现代替代方案
:has() 已在 Chrome 105+、Safari 15.4+、Firefox 121+ 原生支持，且语义上最接近 :target-within 的原始意图：当容器内任意后代成为 :target 时，给该容器加样式。
- 必须确保目标元素（如
<h2 id="step2"></h2>）是容器的**后代**，不能是兄弟或外部元素 - 写法必须是
section:has(:target)或更精确的section:has(h2:target)，不能写成section:has(#step2)（:has()不接受 ID 字面量） - 若容器内有多个可能被锚点指向的元素，
:has(:target)仍能匹配——只要其中任意一个处于:target状态 - 注意 SSR 场景：服务端渲染时
location.hash为空，:has(:target)初始不触发，需靠客户端 hashchange 后的首次渲染补全
:target ~ section 这类兄弟选择器只适用于特定 HTML 结构
当你无法控制 HTML 结构（比如目标元素不在容器内部，而是和容器同级），:target ~ section 可作为兜底手段，但它有硬性前提：
- 所有带
id的锚点元素（如<a id="step2"></a>）必须**出现在目标<section></section>之前** - 它们与
<section></section>必须处于**同一父元素下**（同级兄弟关系） -
~只能匹配后续兄弟，不能跨层级；写成:target ~ .container > section是无效的 - 如果页面用 React/Vue 动态渲染，需确保锚点节点在挂载时真实存在于 DOM 中，否则
:target无源可指
JavaScript 模拟 :target-within 的关键避坑点
真要动态判断“某个容器是否包含当前 :target 元素”，JS 是唯一通用解法，但容易踩坑：
- 别用
MutationObserver监听 DOM 变化来响应 hash——开销大、易抖动；应只监听hashchange事件 - 获取目标元素时用
document.getElementById(location.hash.slice(1))，而非querySelector，避免 class/name 误匹配 - 检查元素是否在容器内，用
container.contains(targetEl)，不要依赖getBoundingClientRect()计算位置——滚动中坐标不准 - SSR 框架（如 Next.js）首屏需做防御：先检查
location.hash是否为空，非空再执行查找和加 class - 加 class 后记得清理旧状态，避免多个容器同时高亮；推荐用
container.classList.toggle('is-targeted', condition)
真正复杂的地方不在写法，而在结构约束和运行时上下文——:has(:target) 要求 DOM 层级干净，JS 方案得扛住 SSR 和动态渲染的双重干扰。选哪个，取决于你对 HTML 结构的掌控力和浏览器支持底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
