CSS last-of-type|极客教程

CSS last-of-type

在CSS中，:last-of-type 伪类选择器用于选择某个元素的最后一个特定类型的子元素。这个选择器非常有用，可以帮助我们在样式设计中更精确地控制元素的样式。

语法

:last-of-type 伪类选择器的语法如下：

selector:last-of-type {
  /* styles */
}

其中 selector 是要选择的元素的父元素，:last-of-type 表示选择该父元素下的最后一个特定类型的子元素。

示例代码

示例1：选择最后一个段落元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS last-of-type Example</title>
<style>
p:last-of-type {
  color: red;
}
</style>
</head>
<body>
<p>geek-docs.com 1</p>
<p>geek-docs.com 2</p>
<p>geek-docs.com 3</p>
</body>
</html>

Output:

CSS last-of-type

在这个示例中，我们选择了最后一个段萼元素，并将其文字颜色设置为红色。

示例2：选择最后一个列表项

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS last-of-type Example</title>
<style>
li:last-of-type {
  font-weight: bold;
}
</style>
</head>
<body>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
</body>
</html>

Output:

CSS last-of-type