CSS目标伪类

CSS目标伪类（

target pseudo-class）是CSS选择器中的一种特殊伪类，用于匹配当前URL片段标识符（即哈希值）指向的页面元素。该选择器在创建单页面应用（SPA）导航、选项卡切换或高亮文档特定部分时非常有用。

基本概念[编辑 | 编辑源代码]

当浏览器地址栏的URL包含片段标识符（如`#section1`）时，`:target`伪类会匹配页面中ID与该片段值相同的元素。例如：

<!-- HTML结构 -->
<section id="section1">
  <h2>第一节</h2>
  <p>当URL包含#section1时，这个元素会被:target匹配</p>
</section>

对应的CSS规则：

section:target {
  background-color: yellow;
  border-left: 4px solid blue;
}

当用户访问`page.html#section1`时，ID为"section1"的<section>元素会显示黄色背景和蓝色左边框。

语法详解[编辑 | 编辑源代码]

`:target`伪类的标准语法为：

selector:target {
  /* 样式声明 */
}

其中：

```
selector
```
可以是任意有效的CSS选择器
该元素必须具有与URL片段匹配的ID属性

匹配机制[编辑 | 编辑源代码]

实际应用案例[编辑 | 编辑源代码]

案例1：文档内导航高亮[编辑 | 编辑源代码]

<style>
  :target {
    animation: highlight 1.5s ease;
  }
  @keyframes highlight {
    from { background-color: yellow; }
    to { background-color: transparent; }
  }
</style>

<nav>
  <a href="#chapter1">第一章</a>
  <a href="#chapter2">第二章</a>
</nav>

<article id="chapter1">...</article>
<article id="chapter2">...</article>

案例2：纯CSS选项卡[编辑 | 编辑源代码]

<style>
  .tab-content { display: none; }
  .tab-content:target {
    display: block;
    border: 1px solid #ccc;
    padding: 20px;
  }
</style>

<div class="tabs">
  <a href="#tab1">选项卡1</a>
  <a href="#tab2">选项卡2</a>
  
  <div id="tab1" class="tab-content">
    第一个选项卡内容
  </div>
  <div id="tab2" class="tab-content">
    第二个选项卡内容
  </div>
</div>

浏览器兼容性[编辑 | 编辑源代码]

`:target`伪类得到所有现代浏览器的广泛支持，包括：

Chrome 1+
Firefox 1+
Safari 1.3+
Edge 12+
Opera 7+

高级技巧[编辑 | 编辑源代码]

组合使用[编辑 | 编辑源代码]

可以与其他选择器组合实现更复杂的效果：

/* 仅当目标元素是section时才应用样式 */
section:target {
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* 排除特定元素的target状态 */
:target:not(.no-highlight) {
  background-color: #ffa;
}

数学计算应用[编辑 | 编辑源代码]

结合CSS变量和calc()函数实现动态效果：

:target {
  --scale-factor: 1.05;
  transform: scale(var(--scale-factor));
  transition: transform 0.3s ease;
}

注意事项[编辑 | 编辑源代码]

1. 性能考虑：过度使用动画效果可能导致重绘问题 2. 可访问性：确保目标状态有足够的视觉对比度 3. SEO影响：搜索引擎可能将不同片段URL视为独立页面