CSS伪类:target用于选中当前URL中片段标识符（即hash）所指向的元素。当浏览器地址栏的锚点对应页面中某个带有id的元素时，该元素就匹配:target规则，从而可以单独设置样式，实现锚点元素的视觉控制。
基本使用方式
要使用:target，页面中需要有一个链接指向某个id，同时目标元素拥有相同id。当点击链接后，URL变为带hash的形式，目标元素即被选中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
/* 未被指向时的默认样式 */
.box { padding: 10px; border: 1px solid #ccc; }
/* 当元素成为锚点目标时的样式 */
.box:target {
background: #fffae6;
border-color: #f90;
}
</style>
</head>
<body>
<a href="#section1">跳到第一节</a>
<div class="box" id="section1">
这是第一节内容
</div>
</body>
</html>
常见应用场景
1. 锚点高亮
如上例所示，用户点击目录链接后，对应区块背景变色，清晰知道当前位置。
2. 纯CSS展开折叠
利用:target控制详情区域的显示，避免写JavaScript。
.detail { display: none; }
.detail:target { display: block; }
3. 图片灯箱效果
通过链接到图片容器的id，用:target让遮罩和原图显示。
需要注意的问题
- 目标元素必须有id，且链接hash与该id一致。
- 直接打开页面未带hash时，
:target不会匹配任何元素。 - 若多个元素id重复，浏览器通常只匹配第一个。
小结
CSS伪类:target是控制锚点元素样式的实用方案，适合轻量交互。理解其匹配规则和编写方式，就能用很少代码完成高亮、展开等效果。