跳到主要内容

CSS 结构伪类

介绍​

CSS 结构伪类（Structural Pseudo-classes）是一种强大的选择器，允许你根据元素在文档树中的位置或与其他元素的关系来选择元素。与普通的选择器不同，结构伪类关注的是元素的结构性特征，而不是它们的类、ID 或属性。

通过使用结构伪类，你可以轻松地为特定位置的元素（如第一个子元素、最后一个子元素、奇数或偶数位置的元素等）应用样式，而无需手动添加额外的类或 ID。

常见的结构伪类​

以下是 CSS 中一些常见的结构伪类：

  1. :first-child：选择父元素中的第一个子元素。
  2. :last-child：选择父元素中的最后一个子元素。
  3. :nth-child(n)：选择父元素中的第 n 个子元素。
  4. :nth-last-child(n)：选择父元素中的倒数第 n 个子元素。
  5. :only-child：选择父元素中唯一的子元素。
  6. :nth-of-type(n)：选择父元素中第 n 个特定类型的子元素。
  7. :nth-last-of-type(n)：选择父元素中倒数第 n 个特定类型的子元素。
  8. :first-of-type：选择父元素中第一个特定类型的子元素。
  9. :last-of-type：选择父元素中最后一个特定类型的子元素。
  10. :only-of-type：选择父元素中唯一特定类型的子元素。
提示

结构伪类可以帮助你减少 HTML 中的冗余类或 ID，使代码更加简洁和易于维护。

代码示例​

1. :first-child 和 :last-child​

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

li:last-child {
  color: blue;
}

HTML 结构：

html
<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

输出效果：

  • 第一项为红色。
  • 第三项为蓝色。

2. :nth-child(n)​

css
/* 选择列表中的偶数项 */
li:nth-child(2n) {
  background-color: lightgray;
}

HTML 结构：

html
<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
</ul>

输出效果：

  • 第二项和第四项的背景颜色为浅灰色。

3. :nth-of-type(n)​

css
/* 选择第二个段落 */
p:nth-of-type(2) {
  font-weight: bold;
}

HTML 结构：

html
<div>
  <p>第一段</p>
  <p>第二段</p>
  <p>第三段</p>
</div>

输出效果：

  • 第二段文字加粗。

实际应用场景​

1. 表格隔行变色​

使用 :nth-child 伪类可以轻松实现表格的隔行变色效果，提升可读性。

css
/* 表格隔行变色 */
tr:nth-child(odd) {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #ffffff;
}

HTML 结构：

html
<table>
  <tr><td>第一行</td></tr>
  <tr><td>第二行</td></tr>
  <tr><td>第三行</td></tr>
</table>

输出效果：

  • 奇数行背景为浅灰色，偶数行背景为白色。

2. 导航菜单高亮当前项​

使用 :last-child 或 :nth-last-child 可以为导航菜单的最后一个项添加特殊样式。

css
/* 导航菜单最后一个项高亮 */
nav a:last-child {
  color: orange;
}

HTML 结构：

html
<nav>
  <a href="#">首页</a>
  <a href="#">关于</a>
  <a href="#">联系</a>
</nav>

输出效果：

  • “联系”链接文字颜色为橙色。

总结​

CSS 结构伪类是一种强大的工具，可以帮助你根据元素在文档中的位置或结构关系来应用样式。通过掌握这些选择器，你可以编写更简洁、更灵活的 CSS 代码，而无需依赖额外的类或 ID。

备注

记住，结构伪类的选择是基于文档的结构，因此在动态添加或删除元素时，样式会自动更新。

附加资源与练习​

  1. 练习：尝试使用 :nth-child 伪类为一个包含 10 个项目的列表添加交替背景色。
  2. 资源：

通过不断练习和探索，你将能够熟练运用 CSS 结构伪类来创建更动态和响应式的网页设计！