CSS中不存在:target-within伪类，它未被标准收录且浏览器不支持；实际可用的是:target匹配URL锚点ID元素，或用:has(> :target)模拟容器内目标效果，但需注意兼容性及语法限制。
:target-within 并不存在——CSS 标准里没有这个伪类，浏览器也不支持。你搜到的可能是误传、拼写错误，或把 :has() + :target 的组合方案当成了新伪类。
为什么找不到 :target-within？
CSS 规范中只有 :target，它只匹配 URL 中 # 后直接对应的那个 id 元素。没有 “目标元素在某个容器内” 的原生监听机制。所谓 “:target-within 效果”，本质是用其他合法手段模拟：要么靠结构约束（比如让所有可被锚点指向的子项都带 id），要么靠 :has() 配合 :target 做父级样式响应。
用 :has(:target) 模拟 “容器内有目标”
这是目前最接近需求的可行方案，但要注意兼容性与写法限制：
-
:has()在 Chrome 105+、Firefox 121+、Safari 15.4+ 支持，IE 和旧版 Edge 完全不支持 - 必须写成
parent:has(> :target)或parent:has(#id)，不能省略关系符（如>）或用通配符 -
:has()不能出现在选择器开头（如:has(:target) .section是无效的） - 示例：想让
.tab-group在任意子项被锚点命中时加边框
.tab-group:has(> :target) {
border: 2px solid #007acc;
padding: 1rem;
}
对应 HTML 必须保证 :target 元素是 .tab-group 的**直接子元素**，且自身有合法 id。
立即学习“前端免费学习笔记（深入）”；
更稳妥的降级方案：给容器加 id，用多个 :target 覆盖
如果目标是“点击链接后高亮整个区域”，又不想依赖 :has()，就别绕弯——直接把 id 放在容器上：
- 把
id从子标题移到外层<section></section>，例如<section id="faq"><h2>FAQ</h2> <p>...</p></section> - 用
section:target控制整个区块样式，而不是试图监听“里面有没有目标” - 这样既规避了
:has()兼容性问题，也避免了结构强耦合（比如要求子项必须是直接子元素）
真正容易被忽略的点是：不是所有“看起来像监听容器”的需求，都需要 :has()。很多时候，调整 id 的落点位置，比硬套新特性更稳定、更可控。
