CSS选择器:last-of-type用于选择同一类型的*一个元素。

 

首先，我们需要了解CSS选择器的基本语法。选择器是用来选择HTML文档中的元素，进而对其进行样式设置。选择器由一个或多个选择器标记组成。选择器标记指定如何匹配HTML元素。常见的选择器包括标签选择器、类选择器、ID选择器、属性选择器等。

 

:last-of-type选择器是其中之一，它用于选择同一类型的*一个元素。也就是说，如果一个HTML文档中有多个相同类型的元素，:last-of-type选择器会选择这些元素中的*一个。

 

下面是一个简单的示例，展示了如何使用:last-of-type选择器：

 

HTML代码：

```html

• Apple
• Banana
• Banana
• Orange
• Orange
• Orange

```

 

CSS代码：

```css

li:last-of-type {

color: red;

}

```

 

在这个例子中，我们有一个无序列表（ul），里面包含了多个相同的li元素，包括"Apple"、"Banana"和"Orange"。我们希望对其中的*一个li元素进行样式设置，让它的颜色变为红色。

 

运用:last-of-type选择器，我们将li:last-of-type指定为选择器的规则，将color属性设置为red。结果就是，列表中*一个li元素的文本颜色将变为红色。

 

这只是:last-of-type选择器的一个简单示例，接下来我们将深入探讨它的应用场景。

 

一、选择同一类型的*一个元素

:last-of-type选择器最常用的场景之一，就是选择同一类型的*一个元素。

 

例如，一个新闻页面包含多个标题（h1、h2、h3等），我们希望只对每个级别标题中的*一个进行特殊样式设置，可以这样使用:last-of-type选择器：

 

HTML代码：

```html

First Heading

Second Heading

First Subheading

Second Subheading

First Sub-Subheading

Second Sub-Subheading

```

 

CSS代码：

```css

h1:last-of-type

 

h2:last-of-type

 

h3:last-of-type {

color: red;

}

```

 

在这个例子中，我们有多个级别的标题，包括h1、h2和h3。我们希望对每个级别中的*一个标题应用特殊的红色样式设置。通过选择器规则"h1:last-of-type

h2:last-of-type

h3:last-of-type"，我们将它们的颜色属性设置为red。结果就是，每个级别标题中的*一个将呈现红色文本。

 

二、选择同一类型的*一个特定子元素

除了选择同一类型的*一个元素外，:last-of-type选择器还可以选择特定父元素下的类型的*一个子元素。这一特性对于复杂的HTML结构非常有用。

 

例如，一个电影列表页面包含了多个电影块，每个电影块都包含了电影名称、导演名称和演员列表。我们希望只对每个电影块中演员列表中的*一个演员进行样式设置，可以这样使用:last-of-type选择器：

 

HTML代码：

```html

```

 

CSS代码：

```css

.movie .cast li:last-of-type {

color: blue;

}

```

 

在这个例子中，我们有多个电影块，每个电影块中都有电影标题、导演和演员列表。我们希望对每个电影块中演员列表中的*一个演员应用蓝色样式。通过选择器规则".movie .cast li:last-of-type"，我们将*一个演员的颜色属性设置为blue。结果就是，每个电影块中的演员列表中*一个演员都将呈现蓝色文本。

 

三、选择同一类型的*一个特定子元素类型

在上一个例子中，我们选择了演员列表中的*一个演员。但是，如果我们只对其中的一个特定演员进行样式设置呢？

 

例如，在之前的电影列表页面中，我们希望只对每个电影块中演员列表中的"Actor 4"这个演员进行样式设置。可以这样使用:last-of-type选择器：

 

CSS代码：

```css

.movie .cast li:nth-last-of-type(2) {

color: green;

}

```

 

在这个例子中，我们使用了:nth-last-of-type选择器，它表示选择同一类型的倒数第二个子元素。通过选择器规则".movie .cast li:nth-last-of-type(2)"，我们将"Actor 4"的颜色属性设置为green。结果就是，每个电影块中的演员列表中倒数第二个演员即"Actor 4"将呈现绿色文本。

 

根据上述示例，我们可以看到:last-of-type选择器在选择同一类型的*一个元素或特定子元素时非常实用。通过灵活运用这个选择器，我们可以轻松地对特定元素进行样式设置。