如何在CSS中实现target伪类_锚点元素样式控制

:target 伪类可选中URL片段对应的元素并应用样式。例如 #about 会匹配 id 为 about 的元素，常用于高亮导航目标、实现无JavaScript模态框等场景，提升单页交互体验。

当用户点击页面中的锚链接跳转到指定位置时，目标元素可以通过 :target 伪类进行样式控制。这个功能在单页应用或文档内部导航中非常实用，能提升用户体验。

什么是 :target 伪类

:target 是一个CSS伪类，用于选中当前URL片段标识符（即井号 # 后面的部分）所指向的元素。例如，若 URL 为 example.html#section1，则 #section1 元素会匹配 :target 选择器。

基本用法示例

假设你有如下HTML结构：

<nav>
  <a href="#home">首页</a>
  <a href="#about">关于</a>
  <a href="#contact">联系</a>
</nav>

<section id="home"><h2>首页内容</h2></section>
<section id="about"><h2>关于我们</h2></section>
<section id="contact"><h2>联系我们</h2></section>

你可以使用以下CSS高亮当前激活的章节：

立即学习“前端免费学习笔记（深入）”；

:target {
  background-color: #ffeb3b;
  outline: 2px solid #ffa000;
  padding: 10px;
  border-radius: 4px;
}

当点击“关于”链接后，URL变为 #about，id为 about 的 section 就会被上述样式修饰。

万彩商图

专为电商打造的AI商拍工具，快速生成多样化的高质量商品图和模特图，助力商家节省成本，解决素材生产难、产图速度慢、场地设备拍摄等问题。

201

查看详情

实用场景与增强效果

• 滚动到锚点时添加淡入、位移动画：配合 transform 和 opacity 实现平滑提示
• 临时高亮标题：帮助用户快速识别跳转位置
• 模态框控制：用 :target 显示隐藏弹窗（无需JavaScript）

比如实现一个纯CSS的轻量级模态框：

<a href="#modal">打开弹窗</a>
<div id="modal" class="modal">
  <div class="modal-content">
    <p>这是弹窗内容</p>
    <a href="#">关闭</a>
  </div>
</div>

对应CSS：

.modal {
  display: none;
}

.modal:target {<br>
  display: block;<br>
  position: fixed;<br>
  top: 0; left: 0;<br>
  width: 100%; height: 100%;<br>
  background: rgba(0,0,0,0.5);<br>
  justify-content: center;<br>
  align-items: center;<br>
}

这种方法适合简单交互，避免依赖脚本。

基本上就这些。:target 提供了一种基于URL状态来控制样式的直接方式，不复杂但容易忽略。

以上就是如何在CSS中实现target伪类_锚点元素样式控制的详细内容，更多请关注php中文网其它相关文章！