跳到主要内容

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 结构伪类来创建更动态和响应式的网页设计!