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

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

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

什么是 :target 伪类

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

基本用法示例

假设你有如下HTML结构：

首页内容

关于我们

联系我们

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

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

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

实用场景与增强效果

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

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

打开弹窗

  
    

这是弹窗内容

    关闭
  

对应CSS：

.modal {
  display: none;
}

.modal:target {

  display: block;

  position: fixed;

  top: 0; left: 0;

  width: 100%; height: 100%;

  background: rgba(0,0,0,0.5);

  justify-content: center;

  align-items: center;

}

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

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