深入剖析 CSS 中的 last-child 和 last-of-type 选择器

前言

在 CSS 的世界中，选择器扮演着举足轻重的角色，它们允许我们精细地挑选页面元素，并为其应用样式。其中，last-child 和 last-of-type 是两个非常有用的伪类选择器，可以精准地选择文档树中特定的元素。

last-child 选择器

last-child 选择器用于匹配父元素中的最后一个子元素。换句话说，它选择父元素中所有元素的最后一个。需要注意的是，它仅考虑直接子元素，而不考虑嵌套的子元素。

用法

语法：

p:last-child {
  /* 样式规则 */
}

示例

考虑以下 HTML 结构：

<ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

应用以下 CSS 规则：

li:last-child {
  color: red;
}

结果：

项目 3 将以红色显示，因为它是

元素的最后一个直接子元素。

last-of-type 选择器

last-of-type 选择器与 last-child 类似，但它考虑的是所有类型的子元素，而不仅仅是直接子元素。换句话说，它选择父元素中特定类型的最后一个子元素。

用法

语法：

p:last-of-type {
  /* 样式规则 */
}

示例

考虑以下 HTML 结构：

<ul>
  <li>项目 1</li>
  <p>段落 1</p>
  <li>项目 2</li>
  <p>段落 2</p>
</ul>

应用以下 CSS 规则：

p:last-of-type {
  color: red;
}

结果：

段落 2 将以红色显示，因为它是

元素中最后一个

元素。

区别

last-child 和 last-of-type 选择器之间的一个关键区别在于它们考虑的元素类型。last-child 只考虑直接子元素，而 last-of-type 考虑所有类型的子元素。

另一个区别是 last-child 和 last-of-type 在嵌套元素中的行为。last-child 仅选择父元素中的最后一个子元素，而 last-of-type 还会选择嵌套元素中的最后一个子元素。

应用场景

last-child 和 last-of-type 选择器在 CSS 布局和样式化中有着广泛的应用。以下是一些常见的应用场景：

• 为列表或菜单中的最后一条项目应用特殊样式
• 为表格中的最后一行应用不同颜色或边框
• 为文档树中的最后一个段落添加特殊修饰
• 创建分栏布局，其中最后一栏具有不同的宽度或样式
• 选择与特定元素相邻的最后一个子元素

结论

last-child 和 last-of-type 选择器是 CSS 中强大的工具，可以精确地选择文档树中的特定元素。通过理解它们的用法、区别和应用场景，你可以创建更加精致高效的 CSS 布局和样式规则。