:target 是匹配 URL 中 fragment identifier 所指向 id 元素的 CSS 伪类，纯 CSS 实现、大小写敏感、仅作用于首个同 id 元素，需配合 scroll-margin-top 避免头部遮挡且注意 SPA 中 hash 模式兼容性。
什么是 :target 伪类
:target 是 CSS 原生支持的伪类，它匹配 URL 中 fragment identifier（即 # 后面的部分）所指向的元素。比如访问 page.html#section2，浏览器会自动滚动到 id="section2" 的元素，并让该元素成为 :target。
它不依赖 JS，纯 CSS 可用，但注意：只有当前 URL 的 hash 精确匹配元素 id（不是 class 或其他属性）时才生效。
如何用 :target 高亮锚点元素
直接给 :target 添加样式即可，常见做法是加背景、边框或阴影：
section:target {
background-color: #f0f8ff;
padding: 2px 0;
border-left: 4px solid #4a90e2;
}
注意点：
立即学习“前端免费学习笔记（深入）”；
-
:target匹配的是整个元素，不是其子内容，所以样式作用在容器上 - 若多个元素有相同
id（非法但偶发），只有第一个被选中 - 页面加载时若带 hash，
:target会立即生效；后续点击链接也会实时触发/取消 - 不能用
:target:hover这类组合——:target本身已是状态，不响应悬停
单页导航中配合 <a href="#id"></a> 使用的细节
确保导航链接和目标元素能正确关联：
- 链接的
href必须为#xxx，且目标元素必须有对应id="xxx"（大小写敏感） -
name属性已废弃，不要用<a name="xxx"></a>替代id - 若目标是
<h2 id="faq"></h2>，链接写<a href="#faq">FAQ</a>即可 - 滚动后可能被固定头部遮挡，需配合
scroll-margin-top（如section { scroll-margin-top: 60px; }）微调定位
兼容性与容易忽略的问题
:target 在所有现代浏览器中都支持（包括 IE9+），但有两个隐蔽坑：
- SPA 框架（如 Vue Router、React Router）默认用 History 模式，不触发
:target；需显式启用 hash 模式或手动监听hashchange并添加 class 模拟 - 页面内通过 JS 修改
location.hash会触发:target，但若目标元素尚未渲染（如懒加载区块），样式不会应用——得等元素挂载后再设 hash -
:target不会“记住”状态，刷新页面后依然有效，但若服务端对 hash 做了重定向或拦截（如某些静态托管平台），可能导致 hash 被丢弃
最常被跳过的其实是 scroll margin 和 id 唯一性验证——这两个不处理好，高亮看起来就“偶尔失灵”。
