在CSS中，:target伪类用于选中当前URL片段标识符指向的元素，也就是页面中id与地址栏hash值匹配的元素，利用这个特性可以直接实现锚点跳转后的高亮效果，不需要依赖JavaScript逻辑。
:target伪类的基本规则
:target的匹配逻辑非常简单，当浏览器地址栏的URL中存在hash部分，且hash的值（去掉#后的内容）与页面中某个元素的id属性值完全一致时，该元素就会被:target伪类选中，我们可以为这个选中的元素编写专属的样式。
比如页面中有一个id为section1的元素，当URL变为http://ippipp.com#section1时，#section1:target选择器就会匹配到这个元素，此时定义的样式就会生效。
实现锚点高亮的具体步骤
1. 搭建基础页面结构
首先需要准备锚点跳转的触发元素和目标元素，触发元素通过href属性指向目标元素的id，目标元素设置对应的id属性。
<!-- 导航区域，点击跳转到对应锚点 -->
<nav>
<ul>
<li><a href="#section1">跳转到第一部分</a></li>
<li><a href="#section2">跳转到第二部分</a></li>
<li><a href="#section3">跳转到第三部分</a></li>
</ul>
</nav>
<!-- 内容区域，每个区块设置唯一id -->
<div class="content">
<section id="section1">
<h3>第一部分内容</h3>
<p>这是第一部分的详细内容，点击导航中的对应链接会跳转到这里，并且触发高亮效果。</p>
</section>
<section id="section2">
<h3>第二部分内容</h3>
<p>这是第二部分的详细内容，跳转后同样会显示高亮样式。</p>
</section>
<section id="section3">
<h3>第三部分内容</h3>
<p>这是第三部分的详细内容，高亮效果会在跳转后自动生效。</p>
</section>
</div>
2. 编写:target高亮样式
通过:target选择器为目标元素定义高亮样式，常见的效果包括背景色变化、边框高亮、文字颜色调整等，还可以添加过渡动画让效果更平滑。
/* 基础样式，设置内容区块的默认状态 */
section {
padding: 20px;
margin: 20px 0;
border: 2px solid #e0e0e0;
border-radius: 8px;
transition: all 0.3s ease;
}
/* 锚点激活时的高亮样式 */
section:target {
background-color: #f0f7ff;
border-color: #409eff;
box-shadow: 0 0 10px rgba(64, 158, 255, 0.2);
}
/* 导航链接默认样式 */
nav ul {
list-style: none;
padding: 0;
display: flex;
gap: 20px;
}
nav a {
color: #333;
text-decoration: none;
padding: 8px 16px;
border-radius: 4px;
}
nav a:hover {
background-color: #f5f5f5;
}
3. 测试效果
保存代码后在浏览器中打开页面，点击导航中的任意链接，页面会跳转到对应的section区块，同时该区块会显示我们定义的高亮样式，地址栏的hash也会同步变化。如果手动修改地址栏的hash值，对应的区块也会实时切换高亮状态。
实际开发中的注意事项
- 目标元素的id必须唯一，不能和页面中其他元素的id重复，否则:target只会匹配到第一个符合条件的元素。
- 如果页面初始加载时没有hash值，所有元素都不会被:target选中，不会显示高亮样式，这是符合预期的正常表现。
- 如果需要兼容非常老旧的浏览器，需要提前确认:target伪类的兼容性，不过目前主流浏览器都支持这个特性。
- 高亮样式不要设置得过于突兀，尽量和页面的整体设计风格保持一致，避免影响用户的正常阅读。
扩展用法
除了给锚点区块添加高亮，:target还可以实现更多交互效果，比如点击链接显示隐藏的内容：
<a href="#detail">查看详情</a> <div id="detail" style="display: none;"> <p>这里是隐藏的详细内容，点击链接后会显示，同时可以配合:target设置显示样式。</p> </div>
#detail:target {
display: block;
padding: 15px;
background-color: #f9f9f9;
border-left: 4px solid #409eff;
}
这种用法同样不需要JavaScript，仅通过CSS就能实现简单的显示隐藏交互，非常适合轻量级的页面需求。