直接用 :target 伪类可选中 url 锚点指向的元素，它自动匹配 # 后的 fragment identifier 对应的 id 元素，需确保 id 存在、拼写准确、未被动态移除或隐藏，且不包含特殊字符。
怎么用 :target 选中 URL 锚点指向的元素
直接用 :target 伪类就行，它会自动匹配当前 URL 中 # 后面的片段标识符（fragment identifier）所对应的元素。比如访问 page.html#section2，页面里 id="section2" 的那个元素就会被 :target 选中。
注意：必须是 id 属性值完全匹配，name 属性在现代浏览器中基本不生效，别依赖它。
常见错误现象：:target 完全没效果 → 检查 URL 是否带 #xxx、对应元素是否存在且 id 拼写一致（区分大小写）、有没有被 JS 动态移除或重写 id。
-
id值不能含空格、点号、括号等特殊字符，否则 CSS 选择器会解析失败（如id="my.section"需写成#my\.section，但建议直接避开） - 多个元素有相同
id？浏览器只让第一个生效，:target也只会命中第一个 - SPA 路由（如 React Router）切换时 URL 改变但未触发
:target？因为没真正跳转，得手动触发scrollIntoView或用 JS 模拟
:target 和 :focus-within 或 JS 的区别在哪
:target 是纯 CSS 行为，不依赖 JS，也不需要用户交互；而 :focus-within 需要子元素获得焦点，document.getElementById() 等 JS 方式则要主动查询和操作 DOM。
使用场景差异明显：:target 适合做“锚点高亮”“章节展开”这类一次性视觉反馈；想持续响应用户操作（比如点击后保持样式），就得换 JS 或配合 aria-expanded 控制状态。
性能上 :target 几乎零开销，兼容性也很好（IE9+，连 Safari iOS 6 都支持）；但别指望它能监听锚点变化——CSS 伪类没有事件机制。
- URL 改成
#foo→div#foo:target立刻生效；改成#bar→ 原来的:target自动失效，新目标接替 - 如果页面加载时 URL 就带锚点，
:target样式会在渲染完成时立即应用，无需等待DOMContentLoaded - 服务端渲染（SSR）页面也完全可用，不依赖客户端 JS
实际样式怎么写才不容易翻车
最常踩的坑是样式被其他规则覆盖，或者只写了颜色却忘了加背景/边框导致看不出变化。
推荐做法：用明确的视觉提示，比如加边框、背景色、阴影，同时避免影响布局（慎用 margin 或 height 变更）。
section:target {
background-color: #f8f9fa;
border-left: 4px solid #007bff;
padding-left: 12px;
}
- 别只改
color：文字颜色变化在深色背景下可能根本看不出来 - 慎用
animation：某些浏览器在锚点跳转瞬间会触发多次重绘，动画可能卡顿或闪一下 - 如果元素本身有
tabindex="-1"，:target仍有效；但若用了display: none，那它就不可见也不可 target —— 浏览器不会去匹配隐藏元素
URL 锚点没滚动到目标位置怎么办
:target 本身不控制滚动，只是样式匹配。滚动行为由浏览器默认处理，但可能被以下情况干扰：
- 页面顶部有固定导航栏，导致目标元素被遮挡 → 加
scroll-margin-top（如scroll-margin-top: 60px） - CSS 里写了
scroll-behavior: smooth却发现跳转卡顿 → 某些旧版 Safari 对:target+ 平滑滚动组合支持不稳定，可降级为 JSelement.scrollIntoView({ behavior: 'smooth' }) - 目标元素高度为 0 或
visibility: hidden→ 浏览器找不到可滚动的“内容区域”，自然不滚动
一个容易被忽略的点：当通过 JS 修改 location.hash 时，如果目标元素尚未渲染（比如懒加载区块还没挂载），:target 不会生效，滚动也可能失败。这时候得等 DOM 更新后再操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
