CSS目标伪类选择器是CSS3中新增的一类伪类选择器，通过:target伪类可以匹配页面中当前被锚点链接指向的元素，我们可以借助这个特性在不写JavaScript代码的情况下，实现当前锚点的高亮效果。
什么是CSS目标伪类选择器
CSS目标伪类选择器的语法为选择器:target，这里的:target会匹配URL片段标识符（也就是URL中#后面的部分）对应的元素。当用户点击一个指向页面内某个元素id的锚点链接时，URL会更新为包含对应id的片段，此时该id对应的元素就会被:target匹配到。
基本语法示例
/* 匹配当前被激活的目标元素 */
:target {
background-color: #fff3cd;
border-left: 4px solid #ffc107;
padding: 12px 16px;
}
实现高亮当前锚点的完整步骤
要实现锚点点击后高亮当前锚点的效果，只需要三个步骤即可完成：
- 在页面中定义锚点目标元素，给元素设置唯一的id属性
- 添加指向这些id的锚点链接，链接的href属性值为#加上目标元素的id
- 编写
:target伪类的CSS样式，定义高亮的视觉效果
完整示例代码
下面是一个完整的长文档页面锚点高亮示例，点击左侧导航的锚点链接，对应的章节标题会自动高亮：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>锚点高亮示例</title>
<style>
/* 基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
padding: 20px;
}
/* 导航样式 */
.nav {
position: fixed;
left: 20px;
top: 20px;
width: 160px;
background-color: #f8f9fa;
padding: 16px;
border-radius: 8px;
}
.nav a {
display: block;
padding: 8px 12px;
color: #333;
text-decoration: none;
margin-bottom: 8px;
border-radius: 4px;
}
.nav a:hover {
background-color: #e9ecef;
}
/* 内容区域样式 */
.content {
margin-left: 200px;
}
.section {
margin-bottom: 40px;
padding: 20px;
border-radius: 8px;
transition: all 0.3s ease;
}
/* 目标伪类高亮样式 */
.section:target {
background-color: #e8f5e9;
border-left: 5px solid #4caf50;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h2 {
margin-bottom: 12px;
color: #2c3e50;
}
p {
color: #555;
}
</style>
</head>
<body>
<div class="nav">
<a href="#section1">第一章 概述</a>
<a href="#section2">第二章 特性</a>
<a href="#section3">第三章 应用</a>
<a href="#section4">第四章 总结</a>
</div>
<div class="content">
<div class="section" id="section1">
<h2>第一章 概述</h2>
<p>本章主要介绍CSS目标伪类选择器的基本概念和使用场景，帮助开发者快速了解这个特性的作用。</p>
<p>CSS伪类选择器是CSS中非常重要的组成部分，目标伪类就是其中实用性很强的一类。</p>
</div>
<div class="section" id="section2">
<h2>第二章 特性</h2>
<p>本章详细介绍CSS目标伪类选择器的核心特性，包括匹配规则、样式优先级等相关知识。</p>
<p>目标伪类的优先级和类选择器相同，比元素选择器优先级高。</p>
</div>
<div class="section" id="section3">
<h2>第三章 应用</h2>
<p>本章讲解目标伪类选择器的常见应用场景，除了锚点高亮之外还有其他实用用法。</p>
<p>还可以用来实现无JavaScript的选项卡切换效果，通过不同的锚点控制显示不同的内容区域。</p>
</div>
<div class="section" id="section4">
<h2>第四章 总结</h2>
<p>本章对前面的内容进行总结，梳理使用CSS目标伪类选择器的注意事项和最佳实践。</p>
<p>合理使用这个特性可以减少JavaScript代码量，提升页面的性能和可维护性。</p>
</div>
</div>
</body>
</html>
注意事项
- 目标元素的id必须和锚点链接的href中的片段完全匹配，包括大小写，否则无法触发高亮效果
- 如果页面初始URL就包含片段标识符，页面加载时对应的目标元素会直接应用
:target样式 :target伪类的样式优先级和类选择器相同，如果需要覆盖默认样式，需要使用更高优先级的规则- 当URL的片段标识符没有匹配到任何元素时，
:target伪类不会匹配任何元素，不会产生样式效果
其他应用场景
除了高亮当前锚点之外，CSS目标伪类选择器还可以用于实现无JavaScript的选项卡、模态框显示等效果。比如下面的简单选项卡示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>无JS选项卡示例</title>
<style>
.tab-nav a {
display: inline-block;
padding: 8px 16px;
border: 1px solid #ddd;
text-decoration: none;
color: #333;
margin-right: 4px;
}
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ddd;
border-top: none;
}
.tab-content:target {
display: block;
}
/* 默认显示第一个选项卡 */
#tab1 {
display: block;
}
</style>
</head>
<body>
<div class="tab-nav">
<a href="#tab1">选项卡1</a>
<a href="#tab2">选项卡2</a>
<a href="#tab3">选项卡3</a>
</div>
<div class="tab-content" id="tab1">
<p>这是第一个选项卡的内容</p>
</div>
<div class="tab-content" id="tab2">
<p>这是第二个选项卡的内容</p>
</div>
<div class="tab-content" id="tab3">
<p>这是第三个选项卡的内容</p>
</div>
</body>
</html>
CSS目标伪类选择器高亮当前锚点伪类选择器anchor修改时间：2026-06-20 17:54:40