:target伪类生效的前提是必须存在带唯一id的可跳转锚点，且url中包含严格匹配的片段标识符（#id），仅响应地址栏变化，不响应js滚动或pushstate。
target伪类生效的前提条件是什么
必须有可跳转的锚点，且URL中包含对应片段标识符（#id），:target 才会匹配该元素。浏览器不会因为JS手动滚动或scrollIntoView()触发它——只响应地址栏变化。
常见错误现象：:target 样式完全不生效，其实是没点链接、没改URL、或目标元素缺少唯一id属性。
使用场景：单页文档内链导航、FAQ折叠展开后高亮当前项、表单校验失败后聚焦并高亮字段区域。
- 目标元素必须带
id，不能只靠name（HTML5已废弃name用于锚点） - 链接的
href值必须是#xxx格式，且xxx与目标id严格一致（区分大小写） - 若用
history.pushState()改URL但没触发真实跳转，:target不会更新
怎么给target元素加平滑高亮效果
直接写:target { background-color: #fffbcc; }会生硬闪现。更自然的做法是结合过渡和轻微偏移，避免遮挡顶部固定导航栏。
立即学习“前端免费学习笔记（深入）”；
性能影响：纯CSS实现，无JS开销；但若配合transform或box-shadow做动画，需注意旧版Safari对:target动画支持不稳定。
- 先加
scroll-margin-top（如scroll-margin-top: 60px），让跳转后元素顶部留出空间，避开fixed header - 用
transition控制背景色或边框变化，别用opacity——:target本身不触发重绘，opacity过渡可能卡顿 - 避免在
:target里设position: relative或z-index，容易干扰原有布局流
示例：
h2:target {
scroll-margin-top: 60px;
background-color: #fffbcc;
transition: background-color 0.3s ease;
}
target伪类和JavaScript冲突怎么办
当页面用JS监听hashchange并手动修改DOM（比如切换class、隐藏其他章节），:target样式可能被覆盖或延迟应用——因为CSS规则优先级低于行内style，也晚于JS执行时机。
兼容性影响：Chrome/Firefox/Edge均支持良好；iOS Safari 15.4+才修复了:target在SPA中偶发不更新的问题。
- 别在JS里给目标元素加
style.backgroundColor，否则会盖过:target的CSS声明 - 如果必须用JS控制高亮逻辑，就放弃
:target，统一走class切换（如.active-section） - 调试时可用
getComputedStyle(document.querySelector(':target'))确认是否真匹配到元素
为什么target高亮有时只闪一下就消失
最常见原因是：链接点击后页面重新加载，或路由库（如React Router）默认清除hash，导致:target瞬间匹配又立刻失效。
容易被忽略的地方：服务端渲染的静态页没问题，但前端路由场景下，#section-2可能被框架自动剥离或重写为/?_escaped_fragment_=section-2之类。
- 检查Network面板，看点击链接后是否发起新请求（不该有）
- React/Vue项目中，确保
<a href="#xxx"></a>没被框架转成<router-link></router-link>，后者不触发原生锚点行为 - Next.js等SSR框架需禁用
scrollRestoration或手动调用window.scrollTo()配合:target
这事没标准解法，得看你在用什么路由方案——:target本质是原生浏览器机制，跟JS路由不是天然兼容的。
