CSS结构伪类[编辑 | 编辑源代码]

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

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

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

结构伪类可以分为以下几类：

子元素索引伪类：如 :first-child, :last-child, :nth-child(), :nth-last-child()
类型索引伪类：如 :first-of-type, :last-of-type, :nth-of-type(), :nth-last-of-type()
其他结构伪类：如 :only-child, :only-of-type, :empty

常用结构伪类详解[编辑 | 编辑源代码]

:first-child 和 :last-child[编辑 | 编辑源代码]

:first-child 匹配父元素中的第一个子元素，而 :last-child 匹配最后一个子元素。

/* 选择列表中的第一个和最后一个项 */
li:first-child {
    color: red;
}
li:last-child {
    color: blue;
}

示例HTML：

<ul>
    <li>第一项（红色）</li>
    <li>第二项</li>
    <li>第三项（蓝色）</li>
</ul>

:nth-child() 和 :nth-last-child()[编辑 | 编辑源代码]

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

公式可以是：

关键字：odd（奇数）, even（偶数）
数字：3（第3个元素）
表达式：2n+1（奇数元素）

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

示例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>

:first-of-type 和 :last-of-type[编辑 | 编辑源代码]

与 :first-child 类似，但仅匹配特定类型的元素。

/* 选择第一个段落 */
p:first-of-type {
    font-size: 1.2em;
}

示例HTML：

<div>
    <h2>标题</h2>
    <p>第一段（放大字体）</p>
    <p>第二段</p>
</div>

:only-child 和 :only-of-type[编辑 | 编辑源代码]

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

div:only-child {
    border: 1px solid black;
}
span:only-of-type {
    color: green;
}

示例HTML：

<div>
    <div>唯一子元素（有边框）</div>
</div>
<p>
    <span>唯一span（绿色）</span>
    <em>其他元素</em>
</p>

:empty[编辑 | 编辑源代码]

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

div:empty {
    display: none;
}

示例HTML：

<div>有内容</div>
<div></div> <!-- 会被隐藏 -->

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

表格隔行变色[编辑 | 编辑源代码]

使用 :nth-child() 实现斑马纹表格：

table tr:nth-child(odd) {
    background: #f8f8f8;
}
table tr:nth-child(even) {
    background: #e8e8e8;
}

导航菜单高亮首尾项[编辑 | 编辑源代码]

nav a:first-child {
    border-left: none;
}
nav a:last-child {
    border-right: none;
}

动态列表样式[编辑 | 编辑源代码]

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

/* 每5项加粗 */
li:nth-child(5n) {
    font-weight: bold;
}

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

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

总结[编辑 | 编辑源代码]

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