:target伪类在url含匹配id的片段标识符时自动生效，无需js；需确保id唯一、合法且与hash严格一致，配合scroll-margin-top和过渡可优化体验。
什么是 :target 伪类，它怎么触发
:target 只在 URL 中包含片段标识符（即 #xxx）且页面存在对应 id="xxx" 元素时生效。它不是监听点击或滚动，而是由浏览器地址栏变化驱动——哪怕用户手动修改地址栏、点浏览器后退/前进、甚至用 history.pushState() 改了 hash，只要匹配上，样式就立刻应用。
常见误区是以为它需要 JS 配合，其实完全不需要。但要注意：元素必须有 id，name 属性无效；且该 id 值要和 URL 中 # 后面的完全一致（区分大小写）。
给锚点目标加高亮样式的关键写法
直接对 :target 设置样式即可，比如背景色、边框或偏移。但要注意视觉干扰问题——如果目标元素本身很短（如一个 <h3></h3>），高亮可能一闪而过，用户来不及看清。
- 推荐加一点
padding-top和margin-top负值组合，避免被固定头部遮挡 - 用
transition让背景色渐变更友好，但别对scroll-margin-top做过渡（无效） - 避免用
animation晃动或缩放，会分散注意力
示例：
h2:target {
background-color: #fffbec;
padding: 2px 6px;
border-left: 3px solid #f5a623;
scroll-margin-top: 60px; /* 配合 fixed header */
}
目录跳转链接怎么写才可靠
目录项必须是标准的 @#@#@#@#@#@#@#@#@#@0。不要用 javascript:void(0) 或 onclick 模拟跳转，否则不会触发 :target。
几个易错点：
- 链接中的
href必须以#开头，且不能带空格或特殊字符（如#我的章节会失败，应编码为#%E6%88%91%E7%9A%84%E7%AB%A0%E8%8A%82或改用英文 ID） - 目标元素的
id不能以数字开头（如id="1-intro"是无效 HTML5 ID，应改为id="section-1"） - 同一页面多个相同
id会导致行为不可预测，务必保证唯一
和 JavaScript 滚动行为共存时要注意什么
如果用了 scrollIntoView({ behavior: 'smooth' }) 或第三方滚动库，:target 仍会生效——前提是没阻止默认跳转行为。一旦调用 e.preventDefault()，hash 就不会更新，:target 自然不触发。
若需自定义滚动但又想保留 :target 样式，可以：
- 不阻止默认行为，只监听
hashchange做额外处理 - 手动设置
location.hash = '#section-2'触发:target，再调用scrollIntoView - 避免在
click里同时做preventDefault+scrollTo，这等于绕过了浏览器原生 hash 机制
真正容易被忽略的是：服务端渲染（SSR）或静态站点生成器中，若初始 HTML 没有正确输出带 id 的目标元素，首屏加载时即使 URL 带 hash，:target 也不会匹配——因为 DOM 还没挂载完。得确保服务端也吐出完整结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
