target伪类选择器是CSS中用于匹配当前活动锚点目标元素的选择器，当页面URL中的片段标识符（也就是URL中#后面的部分）和页面内某个元素的id属性值完全一致时，该选择器就会匹配到对应的元素并应用样式。这个选择器不需要依赖JavaScript就能实现简单的前端交互效果，在前端开发中有着不少实用的应用场景。
target伪类选择器的基本语法
target伪类选择器的语法非常简单，基础格式如下：
/* 匹配所有被激活的目标元素 */
:target {
/* 样式规则 */
}
/* 匹配指定id的目标元素 */
#targetElement:target {
/* 样式规则 */
}
需要注意的是，只有当URL中的片段标识符和页面内元素的id完全匹配时，对应的样式才会生效。比如当前URL是https://ipipp.com/#section1，那么页面中id为section1的元素就会被:target选择器匹配到。
target伪类选择器的常见使用场景
场景一：点击锚点后高亮对应区域
最常见的用法就是点击导航锚点后，高亮显示对应的内容区域，让用户清楚当前查看的是哪个部分的内容。示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>target选择器高亮示例</title>
<style>
.content-section {
padding: 20px;
margin: 10px 0;
border: 1px solid #ccc;
transition: all 0.3s ease;
}
/* 目标元素高亮样式 */
.content-section:target {
background-color: #e6f7ff;
border-color: #1890ff;
box-shadow: 0 0 8px rgba(24, 144, 255, 0.3);
}
</style>
</head>
<body>
<nav>
<a href="#section1">第一部分</a>
<a href="#section2">第二部分</a>
<a href="#section3">第三部分</a>
</nav>
<div class="content-section" id="section1">
<h3>第一部分内容</h3>
<p>这是第一部分的详细内容，当点击导航中的第一部分链接时，这个区域会高亮显示。</p>
</div>
<div class="content-section" id="section2">
<h3>第二部分内容</h3>
<p>这是第二部分的详细内容，当点击导航中的第二部分链接时，这个区域会高亮显示。</p>
</div>
<div class="content-section" id="section3">
<h3>第三部分内容</h3>
<p>这是第三部分的详细内容，当点击导航中的第三部分链接时，这个区域会高亮显示。</p>
</div>
</body>
</html>
场景二：实现无JavaScript的选项卡切换
利用target伪类选择器还可以实现不需要JavaScript的选项卡切换效果，通过点击不同的标签显示对应的内容区域。示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>target选择器实现选项卡</title>
<style>
.tab-nav {
display: flex;
list-style: none;
padding: 0;
margin: 0;
border-bottom: 1px solid #ccc;
}
.tab-nav li {
padding: 10px 20px;
cursor: pointer;
border: 1px solid transparent;
border-bottom: none;
margin-bottom: -1px;
}
.tab-nav li a {
text-decoration: none;
color: #333;
}
.tab-content {
padding: 20px;
border: 1px solid #ccc;
border-top: none;
display: none;
}
/* 目标内容区域显示 */
.tab-content:target {
display: block;
}
/* 默认显示第一个选项卡内容 */
.tab-content:first-child {
display: block;
}
/* 点击后对应导航高亮 */
#tab1:target ~ .tab-nav li:first-child,
#tab2:target ~ .tab-nav li:nth-child(2),
#tab3:target ~ .tab-nav li:nth-child(3) {
background-color: #fff;
border-color: #ccc;
border-bottom-color: #fff;
}
</style>
</head>
<body>
<div class="tab-container">
<div class="tab-content" id="tab1">
<h3>选项卡一内容</h3>
<p>这是第一个选项卡的内容，默认会显示。</p>
</div>
<div class="tab-content" id="tab2">
<h3>选项卡二内容</h3>
<p>这是第二个选项卡的内容，点击选项卡二标签会显示这个区域。</p>
</div>
<div class="tab-content" id="tab3">
<h3>选项卡三内容</h3>
<p>这是第三个选项卡的内容，点击选项卡三标签会显示这个区域。</p>
</div>
<ul class="tab-nav">
<li><a href="#tab1">选项卡一</a></li>
<li><a href="#tab2">选项卡二</a></li>
<li><a href="#tab3">选项卡三</a></li>
</ul>
</div>
</body>
</html>
使用target伪类选择器的注意事项
- 目标元素的id值必须和URL中的片段标识符完全一致，区分大小写，否则不会生效。
- 页面初始加载时如果没有对应的片段标识符，那么所有匹配
:target的元素都不会应用对应样式。 - 如果需要兼容非常旧的浏览器，需要提前确认目标浏览器是否支持这个选择器，不过目前主流浏览器都已经全面支持。
- 不要滥用这个选择器实现复杂的交互逻辑，复杂场景还是建议结合JavaScript实现，避免样式和交互逻辑过度耦合。
target伪类选择器是一个轻量且实用的CSS特性，合理使用可以减少不必要的JavaScript代码，提升页面的加载性能和可维护性。开发者可以根据实际的业务场景选择合适的使用方式，充分发挥它的作用。
CSStarget伪类选择器前端开发选择器用法修改时间：2026-07-17 08:03:14