编辑“︁CSS结构伪类”︁

= CSS结构伪类 =

'''CSS结构伪类'''（Structural Pseudo-classes）是CSS选择器的一种高级形式，允许开发者根据文档树中的结构关系选择元素。这些伪类基于元素在DOM中的位置、层级或与其他元素的关系进行匹配，无需为元素添加额外的类或ID。结构伪类在创建动态样式、表格隔行变色、列表项特殊处理等场景中非常有用。

== 基本概念 ==

结构伪类通过元素的'''位置'''或'''父子关系'''来选择元素。它们以冒号（:）开头，并附加在基础选择器之后。例如，<code>:first-child</code> 选择作为其父元素第一个子元素的元素。

结构伪类可以分为以下几类：
* '''子元素索引伪类'''：如 <code>:first-child</code>, <code>:last-child</code>, <code>:nth-child()</code>, <code>:nth-last-child()</code>
* '''类型索引伪类'''：如 <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>
* '''其他结构伪类'''：如 <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code>

== 常用结构伪类详解 ==

=== :first-child 和 :last-child ===
<code>:first-child</code> 匹配父元素中的第一个子元素，而 <code>:last-child</code> 匹配最后一个子元素。

<syntaxhighlight lang="css">
/* 选择列表中的第一个和最后一个项 */
li:first-child {
    color: red;
}
li:last-child {
    color: blue;
}
</syntaxhighlight>

'''示例HTML：'''
<syntaxhighlight lang="html">
<ul>
    <li>第一项（红色）</li>
    <li>第二项</li>
    <li>第三项（蓝色）</li>
</ul>
</syntaxhighlight>

=== :nth-child() 和 :nth-last-child() ===
<code>:nth-child()</code> 根据公式选择子元素，<code>:nth-last-child()</code> 从末尾开始计数。

公式可以是：
* 关键字：<code>odd</code>（奇数）, <code>even</code>（偶数）
* 数字：<code>3</code>（第3个元素）
* 表达式：<code>2n+1</code>（奇数元素）

<syntaxhighlight lang="css">
/* 选择所有偶数行 */
tr:nth-child(even) {
    background-color: #f2f2f2;
}
/* 从末尾选择第2个元素 */
li:nth-last-child(2) {
    font-weight: bold;
}
</syntaxhighlight>

'''示例HTML：'''
<syntaxhighlight lang="html">
<table>
    <tr><td>第1行</td></tr>
    <tr><td>第2行（灰色背景）</td></tr>
    <tr><td>第3行</td></tr>
</table>
<ul>
    <li>项目1</li>
    <li>项目2（加粗）</li>
    <li>项目3</li>
</ul>
</syntaxhighlight>

=== :first-of-type 和 :last-of-type ===
与 <code>:first-child</code> 类似，但仅匹配特定类型的元素。

<syntaxhighlight lang="css">
/* 选择第一个段落 */
p:first-of-type {
    font-size: 1.2em;
}
</syntaxhighlight>

'''示例HTML：'''
<syntaxhighlight lang="html">
<div>
    <h2>标题</h2>
    <p>第一段（放大字体）</p>
    <p>第二段</p>
</div>
</syntaxhighlight>

=== :only-child 和 :only-of-type ===
<code>:only-child</code> 选择没有兄弟元素的子元素，<code>:only-of-type</code> 选择父元素中唯一类型的元素。

<syntaxhighlight lang="css">
div:only-child {
    border: 1px solid black;
}
span:only-of-type {
    color: green;
}
</syntaxhighlight>

'''示例HTML：'''
<syntaxhighlight lang="html">
<div>
    <div>唯一子元素（有边框）</div>
</div>
<p>
    <span>唯一span（绿色）</span>
    <em>其他元素</em>
</p>
</syntaxhighlight>

=== :empty ===
选择没有任何子元素（包括文本节点）的元素。

<syntaxhighlight lang="css">
div:empty {
    display: none;
}
</syntaxhighlight>

'''示例HTML：'''
<syntaxhighlight lang="html">
<div>有内容</div>
<div></div> <!-- 会被隐藏 -->
</syntaxhighlight>

== 实际应用案例 ==

=== 表格隔行变色 ===
使用 <code>:nth-child()</code> 实现斑马纹表格：

<syntaxhighlight lang="css">
table tr:nth-child(odd) {
    background: #f8f8f8;
}
table tr:nth-child(even) {
    background: #e8e8e8;
}
</syntaxhighlight>

=== 导航菜单高亮首尾项 ===
<syntaxhighlight lang="css">
nav a:first-child {
    border-left: none;
}
nav a:last-child {
    border-right: none;
}
</syntaxhighlight>

=== 动态列表样式 ===
为长列表的特定项添加样式：

<syntaxhighlight lang="css">
/* 每5项加粗 */
li:nth-child(5n) {
    font-weight: bold;
}
</syntaxhighlight>

== 注意事项 ==
* 结构伪类的计算基于DOM结构，动态修改DOM会影响匹配结果。
* 部分旧浏览器（如IE8及以下）不支持某些伪类。
* 过度使用复杂伪类可能影响性能。

== 总结 ==
CSS结构伪类提供了强大的文档树导航能力，能够减少对额外类名的依赖，使样式表更简洁。通过合理使用这些选择器，可以实现复杂的布局和交互效果，同时保持HTML结构的清晰性。

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