在单页网站开发中，我们常常需要在用户点击导航链接跳转到对应内容区块时，让该区块呈现出高亮状态，从而提升阅读体验。借助 CSS 的 :target 伪类，可以仅用样式表完成这件事，无需任何脚本参与。
什么是 :target 伪类
:target 是 CSS3 引入的伪类，当浏览器地址栏中的 URL 片段（即 # 后面的部分）与页面中某个元素的 id 相匹配时，该元素就成为目标元素，:target 便会命中它。例如地址为 index.html#section2，那么 id="section2" 的元素就可以通过 section:target 被选中。
基础 HTML 结构
我们先写一个简单的单页结构，包含导航与几个内容区块：
<nav> <a href="#sec1">第一节</a> <a href="#sec2">第二节</a> <a href="#sec3">第三节</a> </nav> <section id="sec1"> <h3>第一节内容</h3> <p>这是第一节的相关说明文字。</p> </section> <section id="sec2"> <h3>第二节内容</h3> <p>这是第二节的相关说明文字。</p> </section> <section id="sec3"> <h3>第三节内容</h3> <p>这是第三节的相关说明文字。</p> </section>
使用 :target 实现高亮
下面这段 CSS 给所有 section 一个默认样式，当某个 section 被 target 命中时，改变它的背景与边框，形成高亮：
section {
padding: 20px;
margin: 10px 0;
border: 1px solid #ddd;
background: #fafafa;
transition: all .3s ease;
}
section:target {
background: #fffae6;
border-color: #ffb300;
box-shadow: 0 0 8px rgba(255,179,0,.4);
}
导航自身的高亮处理
有时我们还想让被点击的导航链接也高亮。由于 :target 只能选中的元素是内容区块，导航链接本身不是目标，但可以利用兄弟或父子关系间接控制，或者给每个链接配一个对应规则：
nav a {
color: #333;
text-decoration: none;
padding: 6px 10px;
}
/* 当sec1为目标时高亮第一个链接 */
#sec1:target ~ nav a[href="#sec1"] {
color: #ffb300;
font-weight: bold;
}
如果导航在内容区块之前，上面这种兄弟选择器写法需要调整结构。更简单的做法是把导航放在每个 section 内部或用 JS 辅助，但纯 CSS 方案在多数布局中已足够使用。
注意事项
- 确保每个区块的 id 唯一且与导航 href 中的片段一致。
- 页面加载时若没有 # 片段，所有区块都不会高亮，这是正常表现。
- 旧版 IE 不支持 :target，但现代浏览器均已良好支持。
通过 css:target 制作单页导航高亮，既减少了脚本依赖，也让页面更轻量易维护。
css_target单页导航高亮修改时间：2026-07-29 10:03:18