:last-of-type
是一个 CSS 伪类选择器,它选择其父元素的最后一个符合指定类型的子元素。这个选择器特别有用,当你想要针对某个特定类型的最后一个元素应用样式时,就可以使用它。
例如,假设你有一个包含多个 <p>
元素和 <div>
元素的容器。如果你想要选择并样式化这个容器中的最后一个 <p>
元素,你可以使用 :last-of-type
选择器来实现。
下面是一个简单的示例:
<div class="container">
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<div>这是一个 div 元素。</div>
</div>
.container p:last-of-type {
color: red;
font-weight: bold;
}
在这个示例中,.container p:last-of-type
选择器会选择 .container
类中的最后一个 <p>
元素,并将其文本颜色设置为红色,字体加粗。注意,尽管 <div>
元素是在最后一个 <p>
元素之后出现的,但 :last-of-type
选择器是基于元素类型来选择的,因此它仍然会选择最后一个 <p>
元素。
总的来说,:last-of-type
选择器提供了一种灵活的方式来选择并样式化特定类型的最后一个元素,而无需添加额外的类或 ID。