编辑“︁CSS目标伪类”︁

{{DISPLAYTITLE:CSS目标伪类}}

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

== 基本概念 ==

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

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

对应的CSS规则：
<syntaxhighlight lang="css">
section:target {
  background-color: yellow;
  border-left: 4px solid blue;
}
</syntaxhighlight>

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

== 语法详解 ==

`:target`伪类的标准语法为：
<syntaxhighlight lang="css">
selector:target {
  /* 样式声明 */
}
</syntaxhighlight>

其中：
* {{code|selector}}可以是任意有效的CSS选择器
* 该元素必须具有与URL片段匹配的ID属性

=== 匹配机制 ===
<mermaid>
graph LR
    A[用户访问URL] --> B{URL包含#片段?}
    B -->|是| C[查找ID=片段的元素]
    B -->|否| D[不应用样式]
    C --> E[应用:target样式]
</mermaid>

== 实际应用案例 ==

=== 案例1：文档内导航高亮 ===
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

=== 案例2：纯CSS选项卡 ===
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

== 浏览器兼容性 ==

`:target`伪类得到所有现代浏览器的广泛支持，包括：
* Chrome 1+
* Firefox 1+
* Safari 1.3+
* Edge 12+
* Opera 7+

== 高级技巧 ==

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

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

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

=== 数学计算应用 ===
结合CSS变量和calc()函数实现动态效果：

<syntaxhighlight lang="css">
:target {
  --scale-factor: 1.05;
  transform: scale(var(--scale-factor));
  transition: transform 0.3s ease;
}
</syntaxhighlight>

== 注意事项 ==

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

== 相关概念 ==

* [[CSS伪类]]
* [[URL片段标识符]]
* [[CSS动画]]

[[Category:CSS选择器]]
[[Category:Web开发]]

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS高级选择器]]