:target-within 不是可用的 CSS 伪类，目前所有主流浏览器均未实现，仍处于 CSS Selectors Level 4 草案阶段，被浏览器直接忽略；应改用已广泛支持的 :has(:target) 或 JavaScript 方案。
:target-within 不是可用的 CSS 伪类，目前（2026年5月）所有主流浏览器均未实现该特性。它仍处于 CSS Selectors Level 4 草案阶段，无任何稳定版本支持，连实验性 flag 都已移除。你查到的文档、示例或 polyfill 基本都是过时信息或误传。
为什么 :target-within 写了也不生效
浏览器解析 CSS 时会直接忽略无法识别的伪类，不会报错，也不会 fallback。你写 section:target-within，等价于整条规则被丢弃——样式不会应用，DOM 也无响应。这不是兼容性问题，是“根本不存在”的问题。
- Chrome / Edge：从未实现，
chrome://flags中已无相关选项 - Safari：技术预览版短暂出现过，但 15.4+ 正式版已移除
- Firefox：从未进入 nightly 构建，MDN 明确标注为 "Not supported"
替代方案：用 :has() 模拟 :target-within 行为
真正能落地的现代方案是 :has() —— 它已在 Chrome 105+、Safari 15.4+、Firefox 121+ 原生支持，无需 flag。
假设你想高亮包含锚点目标的整个 <section> 容器：
立即学习“前端免费学习笔记（深入）”；
section:has(:target) {
background-color: #f8f9fa;
border-left: 3px solid #007acc;
}对应 HTML 必须满足：:target 元素（如 <h2 id="step2">）是该 section 的后代（可嵌套多层），而非兄弟或外部元素。
- ✅ 有效结构：
<section><h2 id="step2">Step 2</h2><p>...</p></section> - ❌ 无效结构：
<h2 id="step2"></h2><section>...</section>（此时需用:target ~ section）
老浏览器兜底：JS 监听 hashchange + .closest()
若需支持 Safari 15.3 或 Firefox
核心逻辑是：监听 URL hash 变化 → 查找 document.querySelector(location.hash) → 向上找最近的容器（如 .step）→ 添加临时 class：
window.addEventListener('hashchange', () => {
const target = document.querySelector(location.hash);
if (target) {
const container = target.closest('.step');
if (container) {
// 清除之前高亮
document.querySelectorAll('.step.highlighted').forEach(el => el.classList.remove('highlighted'));
container.classList.add('highlighted');
}
}
});注意：location.hash 带 #，而 querySelector 需要带 # 才能匹配 id；空 hash（如 # 或页面首次加载）需额外判断。
容易被忽略的滚动偏移和可访问性细节
:has() 或 JS 方案都能触发样式，但用户跳转后常被固定头部遮挡——这和 :target-within 无关，而是 scroll behavior 本身的问题。
- 给目标元素（如
<h2 id="step2">）加scroll-margin-top: 60px是最简解，值应等于 sticky header 高度 - 不要在容器上设
scroll-margin-top，它只对:target元素本身生效 - 高亮容器时，避免用
outline（破坏可访问性焦点流），改用border或box-shadow
真正难的不是“怎么写”，而是确认 DOM 结构是否允许 :has() 关联、以及是否值得为极少数旧浏览器维护两套逻辑。
