:target实现导航高亮需目标元素有唯一匹配id且href为#id，大小写敏感；仅作用于目标元素而非链接；纯css方案依赖html结构（如兄弟选择器或容器包裹）；spa中需js配合；不响应滚动或ajax，仅url哈希变化触发。
用 :target 实现导航高亮的前提条件
必须确保页面内每个导航项对应的目标区域有唯一且匹配的 id，且链接 href 是形如 #section-about 的片段标识符。浏览器只在 URL 带 #xxx 且存在对应 id="xxx" 元素时，才给该元素添加 :target 状态。如果用了 name 属性、或 id 值含空格/特殊字符（如 id="contact us"），:target 完全不生效。
-
id和href的值必须完全一致（大小写敏感） - 动态插入的 DOM 若没有同步挂载
id，初始加载后不会触发:target - 单页应用（SPA）中，
pushState改变 URL 不会自动触发:target，需手动滚动或重置元素
导航菜单高亮的 CSS 写法
不能直接对 a 标签写 a:target —— :target 只作用于被跳转到的目标元素（即 section、div 等），不是链接本身。正确做法是利用兄弟选择器或父容器结构，让目标区域“影响”对应导航项。
- 若导航项和目标区域同级且顺序对应，可用
section:target ~ nav a[href$="section"]（但不可靠，依赖顺序） - 更稳的方式：给每个
section加一个数据属性，比如data-nav="about"，再配合 JS 监听hashchange更新nav a的 class - 纯 CSS 方案中，推荐把
a和对应section包进同一容器，用section:target + a或section:target ~ a，但需调整 HTML 结构
:target 在响应式断点下的行为差异
移动端折叠导航常通过 display: none 隐藏菜单，而 :target 不会因为元素不可见就失效 —— 它只看 URL 片段是否匹配。问题在于：当菜单收起时，即使 section 被标记为 :target，对应的 a 项可能已不在可视区域，用户看不到高亮。
- 小屏幕下建议配合
@media重置高亮逻辑，例如只在nav展开时启用:target关联样式 - 避免用
visibility: hidden隐藏导航项，它仍占布局空间，:target样式可能意外生效 - 使用
max-height+overflow: hidden动画收起菜单时，:target本身不受影响，但高亮样式若依赖transform或opacity，需确认过渡是否合理
和 JavaScript 高亮方案的关键区别
:target 是声明式、零 JS 的方案，但它只响应 URL 片段变化，无法感知滚动到达、AJAX 加载、或 Tab 键聚焦等行为。一旦用户点击锚点，地址栏更新，:target 立刻生效；但若页面靠 scrollIntoView() 滚动到某区域，URL 没变，:target 就不会触发。
- SEO 友好：URL 含有意义的哈希，利于爬虫识别当前视图
- 无 JS 降级可用，但无法支持“滚动临界点高亮”（如滚动过 50% 才算进入）
- 注意
window.location.hash和:target并非完全同步 —— 比如脚本设置hash后，DOM 渲染可能有微小延迟，:target样式稍晚应用
:target 机制本身很简单，但真正难的是让它在各种导航结构、响应式状态、以及混合 JS 行为中保持稳定。最容易被忽略的，是假设它能替代 scroll-spy 类逻辑 —— 它不能。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
