:target-within 不存在，浏览器直接丢弃整条css规则；应改用 :has(:target) 实现子元素锚定触发父容器样式，兼容chrome 105+/firefox 121+/safari 15.4+。
:target-within 不存在，浏览器不识别，写上去完全没反应——不是兼容性问题，是语法无效。别浪费时间调试它。
为什么 :target-within 会静默失效
浏览器遇到未知伪类，整条 CSS 规则直接丢弃，不报错、不警告、也不出现在开发者工具的 Styles 面板里。你查 Computed 也找不到任何痕迹。这不是“还没支持”，而是标准里压根没这东西，连实验性 flag 都没开放过。
- MDN、Can I Use、W3C 候选推荐文档中均无记录
- Chrome 137 / Firefox 128 / Safari 17.6 全部不解析
section:target-within这类写法 - 常见错误现象：样式表里写了，链接也跳了，但父容器就是不亮——根源在此
用 :has(:target) 替代（现代浏览器可用）
真正能实现“子元素被锚点命中时高亮父容器”的标准方案是 :has()，前提是目标子元素有 id，且父容器是它的祖先节点。
- 正确写法：
section:has(> h2:target) { border-left: 4px solid #007bff; } -
>表示只匹配直接子级h2，避免深层嵌套误触发；去掉也能工作，但更宽松 - 必须确保结构合法：父
section包裹着带id的h2，不能是兄弟或外层 wrapper - 兼容性：Chrome 105+、Firefox 121+、Safari 15.4+ —— 2026 年主流环境已覆盖，但旧安卓 WebView 和 IE 完全不支持
老浏览器 fallback：把 id 挪到容器上
如果必须兼容 Safari ≤15.3 或 Android 4.4 WebView，放弃“子锚定、父响应”逻辑，改用显式绑定：
- 把
id放在section上：<section id="faq-3"><h2>Q3</h2></section> - 链接指向
#faq-3，样式直接写：section:target { background-color: #f8f9fa; } - 缺点：语义弱化（
section承担了本该由标题承担的锚点职责），但 100% 兼容所有支持:target的浏览器 - 注意：
:target只认id，class、name、data-id全无效
动态渲染内容（React/Vue）里最容易忽略的一点：:has(:target) 不会匹配 display: none 的子元素，但对 visibility: hidden 仍有效；另外，它不响应空 hash 或 pushState 改变的 URL，只认原生锚点跳转行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
