CSS 选择器 :last-of-type

定义

:last-of-type 是一种 CSS 伪类选择器，用于选择指定类型的元素中的最后一个。这个选择器可以让你针对特定类型元素的最后一个实例应用样式，而不管其他不同类型的元素存在与否。

基本语法

element:last-of-type {
  /* CSS 属性 */
}

这里 element 可以是任何 HTML 元素，如 p, div, li 等等。

示例

假设我们有以下 HTML 结构：

<div class="container">
  <p>这是一个段落。</p>
  <p>这是另一个段落。</p>
  <span>这不是一个段落。</span>
  <p>这是最后一个段落。</p>
</div>

如果我们使用如下 CSS：

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

那么最终效果将是：只有最后一个 <p> 元素的内容颜色变为红色。

使用场景

:last-of-type 选择器在处理列表或需要对特定类型的元素进行特定样式的场景中非常有用。例如，在一个包含多种类型子元素的容器中，你可以为特定类型的最后一个元素添加特殊的样式，如改变背景颜色、边框或者文字颜色。

注意事项

• :last-of-type 仅考虑同类型元素。如果在同一个父元素下，有不同类型（如 <p> 和 <span>）的元素，它们不会相互影响。
• 在使用时，确保目标元素确实存在于其父元素下，并且该元素确实存在同类型兄弟元素，否则 :last-of-type 将不起作用。

复杂示例

考虑下面的 HTML 结构：

<div class="list">
  <li>列表项一</li>
  <li>列表项二</li>
  <div>不是列表项</div>
  <li>列表项三</li>
</div>

如果我们想要给最后一个 <li> 元素添加特殊样式：

li:last-of-type {
  font-weight: bold;
}

这将使得“列表项三”这个元素的字体加粗。

总结与扩展

:last-of-type 选择器提供了一种强大的方式来针对特定类型的最后一个元素进行样式设计。结合其他 CSS 选择器和伪类，可以实现更复杂和精确的样式控制。了解如何正确使用这些选择器对于创建结构化和动态的 Web 页面至关重要。