:target 是 CSS 中唯一响应 URL 片段标识符（如 #section1）变化的伪类，当 URL 包含对应 id 时，该元素立即匹配并应用样式，无需 JavaScript，且天然支持浏览器前进/后退。
什么是 :target 伪类
:target 是 CSS 中唯一能响应 URL 片段标识符（即 #xxx）变化的伪类。当页面 URL 包含 #section1，且 DOM 中存在 id="section1" 的元素时，该元素就成为「目标」，:target 规则立即生效——它不依赖 JavaScript，纯 CSS 响应地址栏变化。
基础用法：给锚点元素加高亮样式
最常见需求是点击导航链接后，让对应章节轻微突出。关键点在于：必须确保链接的 href 和目标元素的 id 完全一致（区分大小写、不可含空格或特殊字符）。
/* 点击 #intro 后，#intro 元素背景变浅蓝 */
#intro:target {
background-color: #e6f7ff;
padding: 2px 8px;
border-left: 3px solid #1890ff;
}
/ 可配合过渡实现柔和入场 /
content:target {
animation: highlight 0.4s ease-out;
}
@keyframes highlight {
0% { background-color: transparent; }
100% { background-color: #fff8e1; }
}
- 不要写成
div:target这种宽泛选择器——性能差且易误中其他元素 -
:target只匹配当前 URL 片段指向的**唯一一个元素**，即使多个元素有相同id（不合法），也只作用于第一个 - 若页面加载时 URL 已带
#xxx，:target会立刻触发，无需用户点击
与
:target：常见问题
id
... 注意：iOS Safari 旧版本（≤15.4）对 html { scroll-behavior: smooth; } 支持不稳定，可改用 #faq:target { scroll-margin-top: 64px; } + scroll-margin-top 模拟偏移。
立即学习“前端免费学习笔记（深入）”；
进阶技巧：用 padding-top 模拟轻量级 Tab 或模态框
借助 margin-top: -Xpx 的状态切换特性，可以不用 JS 实现单页内简易交互。例如隐藏/显示内容块：
内容一内容二
- 这种方案适合静态内容页，不适用于需要 SEO 索引全部内容的场景（因为非 :target 内容默认
:target） - 无法监听“取消 target”事件（比如用户手动删掉 URL 中的
:target），所以不能做「点击空白处关闭」这类操作 - 若需支持浏览器前进/后退，它天然兼容——每次 URL 片段变化都会触发
display: none切换
真正容易被忽略的是：当多个 #xxx 样式规则冲突时，CSS 优先级仍按常规计算，不是“最后定义的生效”。比如 :target 和 :target 同时匹配一个元素，前者权重更高。
