:target伪类不生效最常因目标元素无id或id与URL片段不严格匹配（大小写、符号等），仅认id不认class/name，且要求DOM已挂载、无重复id、优先级足够，需用scroll-margin-top避fixed遮挡。
:target 伪类本身不“实现跳转”，它只在跳转发生后自动匹配 URL 中 # 后的 id，并应用样式。高亮是否出现，取决于你有没有写对规则、目标元素是否存在、以及样式有没有被覆盖。
为什么点击链接后 :target 样式没生效
最常遇到的是三类硬性失败：
- 目标元素压根没写
id，或者id值和 URL 中#后面的片段不完全一致（大小写、连字符、下划线、空格都算不同） - 用了
class、name或data-id代替id——:target只认id，其他全无效 - 页面是 React/Vue 等框架渲染的，目标元素在初始 HTML 中不存在，而是异步插入 DOM；浏览器只对已挂载的元素匹配
:target
临时验证是否命中：加一句 :target { outline: 2px solid red !important; }，比背景色更可靠，不受父级 overflow 或透明背景干扰。
:target 样式被覆盖或优先级不够
:target 的选择器权重等同于一个 class（specificity 是 0,1,0），非常容易被压住：
立即学习“前端免费学习笔记（深入）”；
- 别写
div:target这种宽泛选择器，改用语义明确的h2:target或限定作用域如#main h2:target - 检查目标元素是否有内联样式（
style="background: white"），它的优先级高于:target - 避免用
!important治标，优先通过结构提升权重，比如#faq:target就比.faq:target强
滚动后目标被 fixed header 遮挡怎么修
:target 不控制滚动位置，浏览器默认把目标元素顶到视口顶部。如果页面有 position: fixed 的导航栏，就会挡住内容：
- 给目标元素加
scroll-margin-top，例如h2:target { scroll-margin-top: 60px; }（值等于 header 高度） - 不要用
margin-top: -60px来“拉回”，这会破坏文档流，导致后续元素错位 - Safari ≤15.4 不支持
scroll-margin-top，需 JS 回滚补偿：监听hashchange，调用element.scrollIntoView({ block: 'start', behavior: 'smooth' })并手动减去 offset
:target 配合 transition 动画为什么有时不触发
:target 本身不触发重绘，所以某些属性过渡可能无效或卡顿：
- 可用
transition: background-color 0.3s ease或box-shadow，但避免用opacity—— 多数浏览器下无动画 - 页面首次加载带 fragment（如直接访问
page.html#section2）时，:target是立即生效的，不会触发 transition；只有用户后续点击链接切换时才会动 - 旧版 Safari 对
:target动画支持不稳定，若必须兼容，建议统一走 JS 切换.activeclass
真正容易被忽略的点是：DOM 顺序决定 ~ 选择器能否跨锚点高亮，而 :target 在单页应用中依赖路由是否触发原生 hashchange —— 很多框架默认禁用或接管了这个行为。
