: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;
}
<p>/<em> 可配合过渡实现柔和入场 </em>/</p><h1>content:target {</h1><p>animation: highlight 0.4s ease-out;
}</p><p>@keyframes highlight {
0% { background-color: transparent; }
100% { background-color: #fff8e1; }
}- 不要写成
div:target这种宽泛选择器——性能差且易误中其他元素 -
:target只匹配当前 URL 片段指向的**唯一一个元素**，即使多个元素有相同id（不合法），也只作用于第一个 - 若页面加载时 URL 已带
#xxx，:target会立刻触发，无需用户点击
与 <a> 链接和滚动行为配合的注意事项
:target 本身不控制滚动，它只是样式响应器。要实现「点击跳转 + 高亮 + 平滑滚动」三合一，需组合使用：
立即学习“前端免费学习笔记（深入）”；
- HTML 中链接必须是标准锚点：
<a href="#faq">常见问题</a> - 目标元素必须有对应
id：<section id="faq">...</section> - 启用平滑滚动只需一行 CSS：
html { scroll-behavior: smooth; } - 如果目标元素位置被 fixed 导航栏遮挡，需额外加 offset，例如：
#faq:target { scroll-margin-top: 64px; }
注意：iOS Safari 旧版本（≤15.4）对 scroll-margin-top 支持不稳定，可改用 padding-top + margin-top: -Xpx 模拟偏移。
进阶技巧：用 :target 模拟轻量级 Tab 或模态框
借助 :target 的状态切换特性，可以不用 JS 实现单页内简易交互。例如隐藏/显示内容块：
<nav>
<a href="#tab1">选项卡一</a>
<a href="#tab2">选项卡二</a>
</nav>
<p><div id="tab1" class="tab-content">内容一</div>
<div id="tab2" class="tab-content">内容二</div></p><style>
.tab-content { display: none; }
.tab-content:target { display: block; }
/* 默认显示第一个 */
#tab1 { display: block; }
</style>- 这种方案适合静态内容页，不适用于需要 SEO 索引全部内容的场景（因为非 :target 内容默认
display: none） - 无法监听“取消 target”事件（比如用户手动删掉 URL 中的
#xxx），所以不能做「点击空白处关闭」这类操作 - 若需支持浏览器前进/后退，它天然兼容——每次 URL 片段变化都会触发
:target切换
真正容易被忽略的是：当多个 :target 样式规则冲突时，CSS 优先级仍按常规计算，不是“最后定义的生效”。比如 #a:target 和 .active:target 同时匹配一个元素，前者权重更高。
