: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> 容器：

section:has(:target) {
  background-color: #f8f9fa;
  border-left: 3px solid #007acc;
}

对应 HTML 必须满足：:target 元素（如 <h2 id="step2"></h2>）是该 section 的后代（可嵌套多层），而非兄弟或外部元素。

• ✅ 有效结构：<section><h2 id="step2">Step 2</h2> <p>...</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></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"></h2>）加 scroll-margin-top: 60px 是最简解，值应等于 sticky header 高度
• 不要在容器上设 scroll-margin-top，它只对 :target 元素本身生效
• 高亮容器时，避免用 outline（破坏可访问性焦点流），改用 border 或 box-shadow

真正难的不是“怎么写”，而是确认 DOM 结构是否允许 :has() 关联、以及是否值得为极少数旧浏览器维护两套逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！