:target-within 不存在，浏览器不支持；应使用 :has(:target) 实现容器高亮，兼容 chrome 105+、firefox 121+、safari 15.4+；老浏览器可降级为给容器设 id 并用 :target。
:target-within 并不存在 —— CSS 标准里没有这个伪类，浏览器也不支持。所有搜索“:target-within”的结果，基本是混淆了 :has()、:target 或误传的实验性提案。你真正需要的，是当某个容器内有被锚点命中的子元素时，高亮整个容器。这得靠现有标准能力组合实现。
为什么直接写 :target-within 会失败
浏览器解析到未知伪类时会整条规则丢弃（不报错但不生效）。你在开发者工具里看不到它出现在 Styles 面板，Computed 中也查不到。这不是兼容性问题，是语法无效。别在代码里写 section:target-within 或类似变体 —— 它永远不会起作用。
用 :has() + :target 模拟容器级高亮
:has() 是现代 CSS 的关键补位：它允许你基于后代状态反向选中祖先。前提是目标元素有 id，且容器能通过结构关系定位到它。
- 确保目标子元素带
id，例如<h2 id="faq-3">Q3</h2> - 容器必须是该
id元素的**祖先**（不能是兄弟或更远） - 写法示例：
section:has(> :target) { border-left: 4px solid #007bff; } - 注意
>是可选的，但加了能避免深层嵌套误匹配；不加则section:has(:target)更宽松 - 兼容性：Chrome 105+、Firefox 121+、Safari 15.4+；Edge 同 Chrome。2026 年主流环境已可用，但 IE 和旧安卓 WebView 仍不支持
降级方案：纯 :target + 结构约定
如果必须兼容老浏览器，就放弃“容器响应子元素”，改用显式绑定：让容器自己带 id，并和锚点链接严格对应。
- 把
id放在section上，而不是内部标题：<section id="faq-3"><h2>Q3</h2></section> - 链接写成
@#@#@#@#@#@#@#@#@#@0 - 样式直接写
section:target { background-color: #f8f9fa; } - 缺点：语义弱化（section 承担了本该由标题承担的锚点职责），但 100% 兼容所有支持
:target的浏览器
容易被忽略的细节
动态渲染内容（React/Vue）插入后，若 id 是 JS 注入的，要确保它在 DOM 中真实存在且未被重复；:has() 对 display: none 的子元素不触发匹配，但对 visibility: hidden 仍有效；:has(:target) 不会因 URL 哈希为空而匹配，只响应真实命中。别指望它替代 JS 的 hashchange 监听 —— 它只是样式层的声明式表达，不触发事件、不改变滚动行为、也不影响 history 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
