CSS伪类:target用于选中当前活动的锚点目标元素，也就是URL中#后面跟随的片段标识符对应的页面元素，通过为这个选中的元素设置特定样式，就能实现锚点跳转后的高亮效果，不需要依赖JavaScript代码。
:target伪类的基本工作原理
当用户点击页面中的锚点链接，或者手动修改URL的片段部分时，浏览器会自动匹配页面中id属性值与片段标识符一致的元素，此时这个元素就会成为:target伪类的匹配对象，对应的样式规则会立即生效。当URL片段变化或者没有匹配的片段时，样式会自动失效。
基础锚点结构示例
首先需要准备锚点链接和对应的目标元素，结构如下：
<!-- 锚点导航链接 --> <ul> <li><a href="#section1">跳转至第一节</a></li> <li><a href="#section2">跳转至第二节</a></li> <li><a href="#section3">跳转至第三节</a></li> </ul> <!-- 目标内容区域 --> <div id="section1" class="content-section"> <h3>第一节内容</h3> <p>这是第一节的详细文本内容，点击上方导航可以跳转过来。</p> </div> <div id="section2" class="content-section"> <h3>第二节内容</h3> <p>这是第二节的详细文本内容，跳转后会有高亮效果。</p> </div> <div id="section3" class="content-section"> <h3>第三节内容</h3> <p>这是第三节的详细文本内容，高亮样式可以通过CSS自定义。</p> </div>
使用:target改变目标元素背景
通过:target伪类选择器，可以直接为目标元素设置背景色，实现高亮效果，具体CSS代码如下：
/* 基础样式，所有内容区域的默认样式 */
.content-section {
padding: 20px;
margin: 20px 0;
border-radius: 8px;
transition: background-color 0.3s ease; /* 添加过渡效果，样式变化更平滑 */
background-color: #f5f5f5;
}
/* 被锚点选中的目标元素样式，修改背景色 */
.content-section:target {
background-color: #e6f7ff; /* 浅蓝色背景作为高亮 */
}
当用户点击跳转到#section1时，id为section1的div元素就会匹配.content-section:target规则，背景色会变为浅蓝色，其他未被选中的元素保持默认浅灰色背景。
使用:target改变目标元素边框
除了修改背景，还可以通过:target为元素设置边框样式，让目标元素更加突出，代码如下：
/* 目标元素边框高亮样式 */
.content-section:target {
background-color: #e6f7ff;
border: 2px solid #1890ff; /* 蓝色边框 */
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2); /* 可选，添加轻微阴影增强效果 */
}
此时目标元素不仅会显示浅蓝色背景，还会带有2px宽的蓝色实线边框，搭配轻微的阴影效果，视觉上的高亮感会更明显。
完整可运行示例
将HTML和CSS代码组合后，完整的可运行示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>:target伪类锚点高亮示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
font-family: Arial, sans-serif;
line-height: 1.6;
}
.nav {
position: sticky;
top: 0;
background: white;
padding: 10px 0;
border-bottom: 1px solid #eee;
margin-bottom: 20px;
}
.nav ul {
list-style: none;
display: flex;
gap: 20px;
}
.nav a {
text-decoration: none;
color: #333;
padding: 5px 10px;
border-radius: 4px;
}
.nav a:hover {
background-color: #f0f0f0;
}
.content-section {
padding: 20px;
margin: 20px 0;
border-radius: 8px;
transition: all 0.3s ease;
background-color: #f5f5f5;
}
.content-section:target {
background-color: #e6f7ff;
border: 2px solid #1890ff;
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#section1">跳转至第一节</a></li>
<li><a href="#section2">跳转至第二节</a></li>
<li><a href="#section3">跳转至第三节</a></li>
</ul>
</div>
<div id="section1" class="content-section">
<h3>第一节内容</h3>
<p>这是第一节的详细文本内容，点击上方导航可以跳转过来，跳转后该区域会高亮显示。</p>
<p>这里是更多填充内容，用于增加区域高度，方便观察跳转效果。</p>
</div>
<div id="section2" class="content-section">
<h3>第二节内容</h3>
<p>这是第二节的详细文本内容，跳转后会有高亮效果，背景和边框都会变化。</p>
<p>这里是更多填充内容，用于增加区域高度，方便观察跳转效果。</p>
</div>
<div id="section3" class="content-section">
<h3>第三节内容</h3>
<p>这是第三节的详细文本内容，高亮样式可以通过CSS自定义，也可以添加更多效果。</p>
<p>这里是更多填充内容，用于增加区域高度，方便观察跳转效果。</p>
</div>
</body>
</html>
注意事项
- 目标元素的id属性值必须与URL中的片段标识符完全一致，区分大小写。
- 如果页面中多个元素有相同id，:target只会匹配第一个符合条件的元素，所以id需要保证唯一性。
- 添加transition过渡属性可以让样式变化更平滑，提升用户体验。
- :target的兼容性较好，支持所有现代浏览器，不需要考虑过多的兼容问题。
CSS伪类target锚点高亮backgroundborder修改时间：2026-06-15 05:42:44