:target伪类可选中URL锚点指向的元素并添加样式。当页面URL含#片段标识符时，ID与之匹配的元素被高亮，如h2:target设置背景色和边框，实现无需javaScript的交互效果，常用于内容展开、选项卡切换和错误定位，需注意ID唯一性和浏览器兼容性，适用于静态页面增强用户体验。
当页面 URL 包含一个片段标识符（即以 # 开头的锚点），浏览器会尝试滚动到 ID 与该片段匹配的元素。利用 css 的 :target 伪类，我们可以为当前被锚点指向的元素添加特定样式，实现简单的交互效果而无需 javascript。
什么是 :target 伪类？
:target 是一种 CSS 伪类，用于选中当前 URL 锚点所指向的元素。只有当某个元素的 ID 与地址栏中的哈希值相同时，该伪类才会生效。
例如：URL 为 page.html#section2，则 ID 为 section2 的元素会被 :target 选中。
基本语法和使用示例
使用方式非常简单，只需在选择器后加上 :target 即可定义目标元素的高亮样式。
html 结构：
立即学习“前端免费学习笔记（深入）”；
<h2 id="intro">简介</h2> <p>这里是简介内容...</p> <p><h2 id="setup">安装步骤</h2> <p>这里是安装说明...</p></p><p><a href="#intro">跳转到简介</a> <a href="#setup">跳转到安装步骤</a>
CSS 样式：
h2:target { background-color: yellow; padding: 5px; border-left: 4px solid red; }
点击链接后，对应的标题背景变黄，左侧出现红色边框，视觉上突出显示当前定位部分。
实用应用场景
:target 不仅可用于高亮文本，还能实现一些轻量级交互：
- 内容展开/折叠：点击链接显示隐藏内容
- 简易选项卡：通过锚点切换不同面板
- 错误定位提示：表单验证失败时高亮问题区域
示例：点击链接展开内容
.hidden-content { display: none; } <p>.section:target .hidden-content { display: block; }
当用户点击指向某个 section 的链接时，其内部的 hidden-content 会显示出来。
注意事项与兼容性
虽然 :target 功能简洁有效，但使用时需注意以下几点：
- 必须确保 HTML 中存在与哈希值匹配的 ID，ID 不能重复
- 不支持低版本 IE（IE8 及以下）
- 无法监听状态变化，复杂交互仍需 JavaScript 配合
- 页面加载时若已有 hash，:target 立即生效
基本上就这些。合理使用 :target 能提升用户体验，尤其适合文档、帮助页面等静态内容的锚点增强。不复杂但容易忽略的小技巧。