:target-within 不存在，浏览器直接忽略该伪类；可用 :has(:target) 替代，要求 :target 元素为容器后代，否则需用 js 监听 hashchange 并调用 .closest() 查找。
:target-within 根本不存在，别白费力气写它
截至 2026 年 7 月，:target-within 不是有效的 CSS 伪类。它从未被任何主流浏览器（Chrome、Firefox、Safari、Edge）实现过，连实验性 flag 都已移除。你写的 section:target-within 这类规则，浏览器解析时直接忽略——不报错、不 fallback、也不生效。这不是兼容性问题，是“语法不存在”的问题。
为什么 :target-within 写了也没反应
常见错误现象包括：样式完全没变化、开发者工具里 computed styles 中看不到 :target-within 规则、反复检查选择器结构却始终无效。根本原因只有一个：:target-within 不在 CSS 实现规范中，浏览器压根不认识它。
- Chrome / Edge：
chrome://flags中早已移除相关选项，当前稳定版无任何支持痕迹 - Safari：技术预览版曾短暂出现，15.4+ 正式版起彻底删除
- Firefox：从未进入 nightly 构建，MDN 明确标注为 Not supported
真正能用的替代方案：:has(:target)
:has() 是目前唯一轻量、纯 CSS、广泛支持的等效解法，已在 Chrome 105+、Safari 15.4+、Firefox 121+ 原生启用。
- HTML 结构必须满足：
:target元素（如<h2 id="step2"></h2>）是目标容器的**后代**，不能是兄弟或外部元素 - 正确写法：
section:has(:target) { background-color: #f8f9fa; border-left: 3px solid #007acc; } - 错误结构示例：
<h2 id="step2"></h2> <section></section>→ 此时需改用:target ~ section，但仅限同级兄弟 - 注意：
:has()不支持伪类嵌套过深（如:has(.foo :target)在部分旧 Safari 中不稳定）
兜底方案：JS 监听 hashchange + .closest()
若需支持 Safari 15.3 或更老版本，或页面结构无法保证 :target 在容器内（比如锚点是独立 <a name="xxx"></a>），就得用 JS。
- 监听
hashchange事件，获取location.hash对应的元素（document.querySelector(hash)） - 用
.closest('section')向上查找最近的容器，再手动加 class（如is-targeted） - 关键陷阱：SSR 场景下首屏渲染时
location.hash为空，JS 初始化必须做空值防御，否则首屏漏样式 - 避免轮询或
MutationObserver检测位置——易引发布局抖动，尤其滚动频繁时
真正难的不是选哪个方案，而是确认你的 HTML 结构是否允许 :has(:target) 生效；如果不行，JS 方案里 .closest() 的查找路径是否稳定——这两点比语法本身更容易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
