:target不触发高亮的根本原因是URL锚点与页面id不匹配；需确保URL含#xxx、存在合法id="xxx"元素、目标可见且滚动定位准确，配合scroll-margin-top等修复偏移。
伪类 :target 不触发高亮的常见原因
根本问题往往不是 CSS 写错了，而是 HTML 锚点与目标元素不匹配。浏览器只有在 URL 中存在 #xxx 且页面中存在 id="xxx" 的元素时，:target 才会生效。注意：name 属性、class 或无 id 的元素都无法被 :target 匹配。
- 检查 URL 是否真实跳转到了带锚点的地址（例如
https://example.com/page.html#section2），手动修改地址栏后按回车才能触发，仅靠scrollIntoView()或 JS 改变location.hash但未触发导航（如未触发hashchange事件）可能不会立即激活:target -
id值不能以数字开头（如id="1-section"是非法的，部分浏览器会忽略），应改为id="section1" - 避免重复
id—— 页面中多个相同id会导致:target行为不可预测
滚动后 :target 高亮闪一下就消失
这是最典型的“位置偏移”问题：锚点元素被固定定位的头部遮挡，浏览器自动滚动后，目标元素实际出现在视口顶部下方（被 header 盖住），导致其 offsetTop 计算位置和滚动终点不一致，进而影响 :target 的渲染时机或触发稳定性。
- 给目标元素加
scroll-margin-top（推荐）：section:target { scroll-margin-top: 80px; /* 与 fixed header 高度一致 */ }该属性直接告诉浏览器“滚动时，把目标元素顶部留出 80px 空间”，无需 JS 干预，现代浏览器（Chrome 89+、Firefox 68+、Safari 15.4+）均支持 - 若需兼容老浏览器，可用
padding-top+margin-top负值模拟，但需确保父容器overflow-anchor: none防止 Safari 滚动错位 - 禁用
scroll-behavior: smooth可临时验证是否是平滑滚动干扰了:target渲染（极少数旧版 Safari 存在此问题）
:target 配合 JS 滚动导航时的同步陷阱
纯 CSS :target 是声明式的，它只响应 URL hash 变化；而 JS 主动调用 element.scrollIntoView() 或 window.scrollTo() 不会改变 URL，因此不会触发 :target。必须让两者协同，而不是互斥。
- 导航菜单点击时，不要只调用
scrollIntoView()，应同时设置location.hash：document.querySelectorAll('nav a[href^="#"]').forEach(a => { a.addEventListener('click', e => { e.preventDefault(); const targetId = a.getAttribute('href').slice(1); if (targetId && document.getElementById(targetId)) { location.hash = targetId; // ✅ 触发 :target } }); }); - 监听
hashchange事件做补救（例如 hash 被后退/前进改变时）：window.addEventListener('hashchange', () => { const id = location.hash.slice(1); if (id && !document.getElementById(id)) { // 处理不存在的锚点，避免空白高亮 document.body.classList.remove('has-target'); } }); - 避免在 JS 中用
history.pushState()替换 hash —— 它不会触发:target，除非显式写入location.hash
移动端 Safari 中 :target 失效的隐藏条件
iOS Safari 对 :target 的激活有额外限制：如果目标元素在页面加载时不可见（例如在 display: none 容器内、或被 visibility: hidden 遮盖），即使后续显示出来，首次访问带 hash 的 URL 也不会激活 :target 样式。
立即学习“前端免费学习笔记（深入）”；
- 确保目标元素初始状态为可见（
display: block或类似），哪怕用opacity: 0+pointer-events: none代替隐藏 - 若使用 tab 切换等动态显示内容，应在显示目标区域后，用
setTimeout(() => { location.hash = currentHash }, 0)延迟重置一次 hash，强制重新匹配 - Safari 15.4 之前版本对
scroll-margin-top支持不完整，可降级使用padding-top+position: relative+ 负top微调
CSS :target 看似简单，真正卡住人的永远是「URL 是否真的变了」「目标元素是否存在且合法」「滚动后它是否真在预期位置」这三个连环判断。别急着加 JS，先用开发者工具检查 Elements 面板里当前 location.hash 对应的元素身上有没有 :target 的样式计算结果。
