:target伪类仅匹配url片段标识符与元素id属性完全一致的目标，大小写、符号须严格对应，且不支持class等其他属性；动态渲染需确保初始html存在该id；其样式权重等同class易被覆盖，应提升选择器特异性；scroll-margin-top可解决fixed遮挡问题但safari旧版需js回滚；多锚点高亮需借助~兄弟选择器及dom位置关系。
目标元素没加id，:target就完全不工作
浏览器只认 id 属性，class、name、data-id 全无效。比如 URL 是 #faq-2，但元素写的是 id="FAQ-2" 或 class="faq-2"，:target 就不会匹配。
- 大小写、连字符、下划线、空格必须一模一样——
#section2≠id="Section2" - 动态渲染（React/Vue）时，若初始 HTML 里没有该
id元素，:target不会等它挂载后再匹配 - 用浏览器开发者工具检查目标元素的 Computed Styles，看
:target规则是否被应用（没被划掉） - 临时加一句
:target { outline: 2px solid red !important; }快速验证是否命中——比背景色更可靠，不受父级overflow或透明背景干扰
:target样式被覆盖，优先级太低是主因
:target 的选择器权重等同于一个 class（specificity 是 0,1,0），非常容易被压住。别指望 div:target 能赢过 .content h2。
- 改用语义明确的选择器，比如
h2:target或限定作用域如#main h2:target - 避免宽泛写法：
div:target、*:target都容易误中或被覆盖 - 检查目标元素是否有内联样式（
style="background: white"），它的优先级高于:target - 别滥用
!important，优先提升结构权重，比如#faq:target就比.faq:target强
滚动后目标被 fixed header 遮住，得靠 scroll-margin-top
:target 本身不控制滚动位置，浏览器默认把目标元素顶到视口顶部。如果有 position: fixed 的导航栏，就会挡住内容。
- 给目标元素加
scroll-margin-top，例如h2:target { scroll-margin-top: 60px; }（值等于 header 高度） - 不要用
margin-top: -60px来“拉回”，这会破坏文档流，导致后续元素错位 - Safari ≤15.4 不支持
scroll-margin-top，需 JS 回滚补偿：监听hashchange，调用element.scrollIntoView({ block: 'start', behavior: 'smooth' })并手动减去 offset - 移动端小屏上容易偏移，记得测试不同视口高度下的定位精度
多个锚点想高亮同一个目标，得用 ~ 通用兄弟选择器
原生 :target 只能匹配当前 fragment 对应的单个 id 元素。如果希望 #sun、#hot、#yellow 都能高亮同一个 <h1 id="sun"></h1>，必须借助 DOM 位置关系。
- 所有锚点元素（如
<a id="hot"></a>）必须位于目标元素之前，且与目标同级（在同一父容器下） - 用
:target ~ h1匹配任意被激活的:target之后出现的所有<h1></h1> - 加
:target:not(a) { outline: none; }防止空锚点自身加 outline，影响可访问性和布局 - 如果目标包在
<section></section>里，就得写成:target ~ section > h1
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
