用 :target 可实现跳转后评论块自动高亮，但需确保 href 与目标元素 id 完全一致、id 合法唯一、样式优先级足够；异步加载后需 JS 补救，滚动偏移可用 scroll-margin-top 修正。
点击链接跳转后，如何让对应评论块自动高亮
直接用 :target 就行，但前提是跳转链接的 href 必须指向带 id 的评论元素，且该 id 值要和 URL 中的 fragment（# 后面部分）完全一致。浏览器原生支持这个伪类，不需要 JS，但容易忽略两点：一是目标元素必须在 DOM 中存在且可访问，二是高亮样式不能被更具体的规则覆盖。
常见错误现象：:target 没生效，页面跳转了但没变色——大概率是评论块没设 id，或者 id 值含空格、中文、特殊字符（如 #comment-123? 或 #评论-1），这些会导致匹配失败。
- 确保每个评论块有唯一、合法的
id，例如... - 跳转链接写成
@#@#@#@#@#@#@#@#@#@0，不要加空格或编码字符 - 样式优先级不够时，在
:target规则前加父容器选择器，比如.comments :target
高亮样式太突兀？怎么控制过渡和范围
:target 本身不触发 CSS 动画或 transition，但可以配合 transition 对其他属性（如 background-color、box-shadow）做渐变效果。注意：只有“从非 target 状态变为 target 状态”时才会应用 transition，而页面首次加载带 fragment 时，:target 是立即生效的，不会触发过渡——这是常被忽略的兼容性细节。
使用场景：想让高亮更柔和，又不想 JS 监听 hashchange 手动加 class。
- 给目标元素设
transition: background-color 0.3s ease, box-shadow 0.3s ease - 避免用
opacity过渡，因为:target不会重绘 opacity 变化（多数浏览器下无动画） - 若需高亮整个评论区（含头像、时间等子元素），用
:target *或给子元素设 inherit 属性，但慎用，可能影响可访问性
锚点跳转后页面滚动位置不准？和 :target 冲突吗
不冲突，但行为有关联。浏览器默认会在 :target 元素上执行 scrollIntoView() 行为，如果评论块上方有 sticky 导航栏或固定 header，就会被遮挡。这不是 :target 的问题，而是滚动偏移未补偿。
参数差异：CSS 里没有直接控制滚动偏移的属性，得靠 scroll-margin-top（现代浏览器支持）或 JS 回滚修正。
- 最简方案：给
:target元素加scroll-margin-top: 60px（值等于 header 高度） - 兼容老浏览器（如 Safari 14.1 以下）需用 JS 监听
hashchange，再调用element.scrollIntoView({ block: 'start', behavior: 'smooth' })并手动减去 offset - 别在
:target上设margin-top: -60px来“拉回”，这会破坏文档流，导致后续元素错位
评论异步加载后 :target 失效？怎么补救
失效是因为页面初始渲染时目标元素还没插入 DOM。:target 是 CSS 机制，只对当前存在的元素起作用，不会监听新增节点。所以 AJAX 加载评论后，即使 URL fragment 没变，也不会重新触发高亮。
性能影响小，但逻辑必须补全：要么在数据加载完成后手动触发一次 scroll + 样式更新，要么改用 class 控制高亮，把控制权交给 JS。
- 推荐做法：加载完评论后，检查
window.location.hash，用document.querySelector(window.location.hash)找到元素，然后加临时 class（如is-targeted），再用 CSS 写.is-targeted规则模拟:target - 避免反复查询和 class 切换，可在加载前先缓存 hash 值，加载成功后再比对
- 如果用 React/Vue，别依赖
:target，直接用 state 控制高亮 class —— SSR 场景下初始:target仍可兜底，但 hydrate 后以组件状态为准
复杂点在于混合场景：服务端已渲染部分评论，前端又追加新评论，此时要判断 fragment 是否指向新内容，并决定是否滚动、是否高亮、是否触发通知。这些边界情况，光靠 :target 做不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
