概述

:last-of-type 选择器匹配特定元素中的最后一个子元素，无论其类型或位置如何。它是一种强大的选择器，可用于创建复杂且特定的样式规则。

语法

element:last-of-type {
  /* CSS 规则 */
}

其中：

• element 是要匹配的元素。
• :last-of-type 是选择器。

用法

:last-of-type 选择器可用于各种场景，包括：

• 突出显示列表中的最后一个项目：

li:last-of-type {
  background-color: #f0f0f0;
}

• 为表格中的最后一行添加边框：

tr:last-of-type {
  border-bottom: 1px solid black;
}

• 在导航菜单中禁用最后一个链接：

nav a:last-of-type {
  pointer-events: none;
  color: #999;
}

• 仅在最后一个子元素中应用悬停效果：

.container:hover > div:last-of-type {
  background-color: #ccc;
}

伪类与 :last-of-type

:last-of-type 选择器可以与其他伪类结合使用，以创建更复杂的样式规则。例如：

• :last-of-type:hover 匹配悬停时列表中的最后一个项目。
• :last-of-type:focus 匹配具有焦点的表格中的最后一行。
• :last-of-type:active 匹配激活时导航菜单中的最后一个链接。

浏览器支持

:last-of-type 选择器在所有现代浏览器中都得到广泛支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

性能考虑

与其他选择器一样，过度使用 :last-of-type 选择器可能会影响性能。为了最大限度地提高性能，建议在需要时使用此选择器，并避免在嵌套或复杂的文档结构中使用它。

替代方案

在某些情况下，可以使用其他选择器来实现与 :last-of-type 相同的效果。例如：

• :nth-last-child(1) 匹配特定元素中的最后一个子元素。
• :nth-last-of-type(1) 匹配特定元素中的最后一个特定类型子元素。

然而，:last-of-type 选择器通常是实现上述效果的最简洁和最有效的方法。