: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），非常容易被压住：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 别写 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 切换 .active class

真正容易被忽略的点是：DOM 顺序决定 ~ 选择器能否跨锚点高亮，而 :target 在单页应用中依赖路由是否触发原生 hashchange —— 很多框架默认禁用或接管了这个行为。

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