:target伪类生效需URL含匹配id锚点且页面存在对应id元素，不支持name/class；优先级同普通选择器，可借ID提升；配合scroll-margin-top可解决导航栏遮挡；现代框架中因多用history路由而受限。
target伪类怎么写才生效
必须确保 URL 中存在对应的锚点片段（即 #id），且页面中存在匹配的 id 属性元素，:target 才会生效。它不认 name 属性，也不支持 class 或其他选择器。
- 正确写法：
<a href="#section1">跳转</a>+<div id="section1">内容</div>→#section1:target { background: yellow; } - 常见错误：用
class="section1"代替id="section1"→:target完全不触发 - 注意大小写：URL 中是
#Section1，但元素id是section1→ 不匹配 - 单页应用（如 React/Vue）中，路由变化未必触发浏览器原生 hashchange，需手动触发或依赖框架的 scroll behavior 支持
target高亮样式被其他规则覆盖怎么办
:target 的优先级和普通类选择器一样，没有特殊加成。一旦被更具体的选择器（比如 .content div#main）或 !important 覆盖，高亮就失效。
- 检查开发者工具里该元素的 computed styles，看
:target对应的样式是否被 strikethrough - 提高优先级：用
#myid:target（比.myclass:target更强），或加一层父容器限定，如article :target - 避免滥用
!important，它会让后续调试变困难；优先通过选择器结构控制权重 - 注意重置影响：某些 CSS reset 会设
*:target { scroll-margin-top: 0; }，可能干扰滚动定位，需显式覆盖
target配合scroll-margin实现平滑定位
点击锚点跳转后，目标元素常被顶部导航栏遮挡。scroll-margin-top 是解决它的标准方式，但只在 :target 元素上生效，且需配合 scroll-behavior: smooth 才自然。
- 基础组合：
:target { scroll-margin-top: 64px; }+html { scroll-behavior: smooth; } - 兼容性注意：
scroll-margin-top在 Safari 14.1+、Chrome 92+、Firefox 90+ 支持；旧版 Safari 需用 JS 模拟 - 不要写在
body或全局容器上，它只对被滚动到的:target元素本身起作用 - 值推荐用 rem 或 px，避免用 %（计算基准不明确）
target伪类在现代前端框架里的实际限制
React、Vue 等框架默认使用 History API 路由，hash 模式虽能用 :target，但多数项目已弃用；而 history 模式下 URL 无 #，:target 直接失效。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：用 JS 监听
hashchange或popstate，动态添加 class，再用 CSS 控制样式 - SSR 场景下，服务端无法感知客户端 hash，
:target样式不会在首屏渲染，有 FOUC 风险 - 如果坚持用
:target，必须确保路由始终走 hash 模式，且所有锚点跳转都通过<a href="#xxx">发起，不能用router.push或history.pushState
真正难的不是写对 :target，而是判断当前场景是否还适合它——尤其当页面有固定头部、用了非 hash 路由、或者需要服务端同步高亮时，CSS 伪类就退居二线了。
