:target 未生效主因是目标元素缺失合法id、URL与id大小写/字符不匹配，或异步加载时DOM未就绪；应确保id唯一且正确，用border-left和box-shadow组合高亮，scroll-margin-top需直接设在目标元素上而非:target规则中。
:target 能直接高亮 URL 中 # 后指定的评论块，但前提是该评论块有合法、唯一、大小写完全匹配的 id，且样式没被更高优先级规则覆盖——否则点击跳转后什么都不会变。
为什么 :target 没生效？检查这三点
最常见失效不是 CSS 写错，而是 HTML 或 URL 层面不匹配：
- 目标
<div>缺少id属性，或写了class="comment-123"却指望#comment-123触发 ——:target只认id，不认class或name -
href="#comment-123"和id="Comment-123"大小写不一致，或含空格、中文、?&等非法字符（如id="评论-456"或id="comment-456?"） - 页面是异步加载的（比如 AJAX 渲染评论区），DOM 插入时漏了
id，或初始 URL 带#comment-789但对应元素尚未渲染完成
怎么写才确保高亮可见又不突兀
纯靠 background-color 容易盖掉原有背景图或文字颜色，推荐组合使用更稳妥的视觉提示：
- 加左侧边框：
border-left: 3px solid #007bff;，不影响内容流，辨识度高 - 配轻微阴影：
box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);，比背景色更柔和 - 用
transition控制变化节奏：transition: border-left 0.3s ease, box-shadow 0.3s ease; - 避免对
:target自身设opacity或transform过渡——首次加载带 fragment 时不会触发动画，只会在后续 hash 切换时生效
scroll-margin-top 必须作用在目标元素上，不是 :target 规则里
固定头部遮挡是最常被忽略的滚动问题。浏览器默认把 :target 元素顶部对齐视口顶部，如果页面有 position: fixed 的导航栏，评论块就会被挡住。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：给目标评论块加
scroll-margin-top: 64px;（值等于 header 高度），它会告诉浏览器“滚动时留出这个空间” - 错误做法：在
:target { scroll-margin-top: 64px; }里写——scroll-margin-top是布局属性，必须直接作用于元素本身，不能放在伪类规则中 - 兼容性注意：Safari 14.1 以下不支持
scroll-margin-top，需用 JS 监听hashchange后调用element.scrollIntoView({ block: 'start', margin: 64 })
动态插入评论后 :target 不触发？得手动补救
原生 :target 只响应 URL fragment 变化，不感知 DOM 是否就位。用户点链接时若评论还没加载出来，跳转会完成但高亮不会出现。
- 简单补救：在评论插入完成后，检查
window.location.hash是否匹配新插入元素的id，若匹配则手动调用element.scrollIntoView()并临时加 class 模拟高亮 - 别依赖
setTimeout等待渲染——用MutationObserver或框架的生命周期钩子更可靠 - 服务端渲染（SSR）页面中，首屏无法预知客户端 hash，
:target样式必然延迟生效，存在 FOUC 风险；如强依赖首屏高亮，就得用 JS 初始化
