CSS 带有类名的最后一个元素

在 CSS 中，我们可以使用 :last-child 伪类来选取某个父元素的最后一个子元素。但是如果我们希望选择带有特定类名的最后一个子元素，该怎么做呢？这时我们可以使用 :last-of-type 和 :nth-last-of-type() 这两个伪类来实现。

:last-of-type 伪类

:last-of-type 伪类可以选择同类型的最后一个元素，无论其是否带有特定的类名。例如，如果我们有以下 HTML 代码：

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li class="special">第三个元素</li>
  <li>第四个元素</li>
  <li class="special">第五个元素</li>
</ul>

我们可以使用以下 CSS 代码来选择带有 .special 类名的最后一个 li 元素：

li.special:last-of-type {
  color: red;
}

在这个例子中，我们使用了 :last-of-type 伪类来选择 ul 元素下的最后一个 li 元素，并使用类名选择器 .special 来限定只选择带有 .special 类名的元素。结果是，第五个元素会变成红色。

:nth-last-of-type() 伪类

:nth-last-of-type() 伪类可以选择同类型的从后往前数的第几个元素，同样也可以结合类名选择器来选择带有特定类名的元素。例如，如果我们有以下 HTML 代码：

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li class="special">第三个元素</li>
  <li>第四个元素</li>
  <li class="special">第五个元素</li>
</ul>

我们可以使用以下 CSS 代码来选择带有 .special 类名的最后一个 li 元素：

li.special:nth-last-of-type(1) {
  color: red;
}

在这个例子中，我们使用了 :nth-last-of-type(1) 伪类来选择 ul 元素下的倒数第一个 li 元素，并使用类名选择器 .special 来限定只选择带有 .special 类名的元素。结果同样是，第五个元素会变成红色。

通过使用 :last-of-type 和 :nth-last-of-type() 这两个伪类，我们可以轻松地选择带有特定类名的最后一个元素。