CSS 取最后一个元素|极客教程

CSS 取最后一个元素

在前端开发中，有时候我们需要对页面中的最后一个元素进行特殊样式处理或者操作。本文将介绍如何使用CSS选择器来取得页面中的最后一个元素，并提供一些示例代码来帮助读者更好地理解。

1. 使用:last-child伪类选择器

:last-child 伪类选择器可以选择某个元素的最后一个子元素。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last Child Example</title>
<style>
    div:last-child {
        color: red;
    }
</style>
</head>
<body>
<div>First div</div>
<div>Second div</div>
<div>Last div</div>
</body>
</html>

Output:

CSS 取最后一个元素

在上面的示例中，我们使用 div:last-child 选择器来选择页面中最后一个 div 元素，并将其文字颜色设置为红色。运行该代码，可以看到最后一个 div 元素的文字颜色变为红色。

2. 使用:nth-last-child伪类选择器

:nth-last-child 伪类选择器可以选择某个元素的倒数第几个子元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nth Last Child Example</title>
<style>
    div:nth-last-child(1) {
        font-weight: bold;
    }
</style>
</head>
<body>
<div>First div</div>
<div>Second div</div>
<div>Last div</div>
</body>
</html>

Output:

CSS 取最后一个元素

在上面的示例中，我们使用 div:nth-last-child(1) 选择器来选择页面中倒数第一个 div 元素，并将其文字设置为粗体。运行该代码，可以看到倒数第一个 div 元素的文字变为粗体。

3. 使用:last-of-type选择器

:last-of-type 选择器可以选择某个元素的最后一个指定类型的子元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last of Type Example</title>
<style>
    p:last-of-type {
        background-color: lightblue;
    }
</style>
</head>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Last paragraph</p>
</body>
</html>

Output:

CSS 取最后一个元素

在上面的示例中，我们使用 p:last-of-type 选择器来选择页面中最后一个 p 元素，并将其背景颜色设置为浅蓝色。运行该代码，可以看到最后一个 p 元素的背景颜色变为浅蓝色。

4. 使用:nth-last-of-type选择器

:nth-last-of-type 选择器可以选择某个元素的倒数第几个指定类型的子元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nth Last of Type Example</title>
<style>
    p:nth-last-of-type(1) {
        color: green;
    }
</style>
</head>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Last paragraph</p>
</body>
</html>

Output:

CSS 取最后一个元素

在上面的示例中，我们使用 p:nth-last-of-type(1) 选择器来选择页面中倒数第一个 p 元素，并将其文字颜色设置为绿色。运行该代码，可以看到倒数第一个 p 元素的文字颜色变为绿色。

5. 使用JavaScript获取最后一个元素

除了使用CSS选择器来获取最后一个元素外，我们还可以使用JavaScript来获取页面中的最后一个元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Last Element Example</title>
</head>
<body>
<div>First div</div>
<div>Second div</div>
<div>Last div</div>

<script>
    const elements = document.querySelectorAll('div');
    const lastElement = elements[elements.length - 1];
    lastElement.style.color = 'purple';
</script>
</body>
</html>

Output:

CSS 取最后一个元素

在上面的示例中，我们使用JavaScript获取页面中最后一个 div 元素，并将其文字颜色设置为紫色。运行该代码，可以看到最后一个 div 元素的文字颜色变为紫色。

6. 使用jQuery获取最后一个元素

如果项目中使用了jQuery，我们也可以使用jQuery来获取页面中的最后一个元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Last Element with jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>First div</div>
<div>Second div</div>
<div>Last div</div>

<script>
    $('div:last').css('font-size', '20px');
</script>
</body>
</html>

Output:

CSS 取最后一个元素

在上面的示例中，我们使用jQuery选择器 $('div:last') 来选择页面中最后一个 div 元素，并将其字体大小设置为20像素。运行该代码，可以看到最后一个 div 元素的字体大小变为20像素。

7. 使用CSS Grid布局获取最后一个元素

在使用CSS Grid布局时，我们也可以通过设置网格项的 grid-column 和 grid-row 属性来获取最后一个元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Grid Last Element Example</title>
<style>
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 100px 100px;
    }

    .grid-item:last-child {
        background-color: lightcoral;
    }
</style>
</head>
<body>
<div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
</div>
</body>
</html>

Output:

CSS 取最后一个元素

在上面的示例中，我们使用CSS Grid布局来创建一个包含4个网格项的网格容器，并通过设置 .grid-item:last-child 选择器来选择最后一个网格项，并将其背景颜色设置为浅珊绿色。运行该代码，可以看到最后一个网格项的背景颜色变为浅珊绿色。

8. 使用Flexbox布局获取最后一个元素

在使用Flexbox布局时，我们也可以通过设置 order 属性来获取最后一个元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Last Element Example</title>
<style>
    .flex-container {
        display: flex;
    }

    .flex-item {
        flex: 1;
    }

    .flex-item:last-child {
        background-color: lightyellow;
    }
</style>
</head>
<body>
<div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>
</body>
</html>

Output:

CSS 取最后一个元素

在上面的示例中，我们使用Flexbox布局创建一个包含3个flex项的flex容器，并通过设置 .flex-item:last-child 选择器来选择最后一个flex项，并将其背景颜色设置为浅黄色。运行该代码，可以看到最后一个flex项的背景颜色变为浅黄色。

9. 使用Sass获取最后一个元素

如果项目中使用了Sass预处理器，我们也可以使用Sass的 :last-child 选择器来获取最后一个元素。下面是一个示例代码：

$color: blue;

div {
    &:last-child {
        color: $color;
    }
}

在上面的示例中，我们使用Sass的 &:last-child 选择器来选择页面中最后一个 div 元素，并将其文字颜色设置为蓝色。编译该Sass代码后，可以看到最后一个 div 元素的文字颜色变为蓝色。

10. 使用Less获取最后一个元素

类似于Sass，如果项目中使用了Less预处理器，我们也可以使用Less的 &:last-child 选择器来获取最后一个元素。下面是一个示例代码：

@color: red;

div {
    &:last-child {
        color: @color;
    }
}

在上面的示例中，我们使用Less的 &:last-child 选择器来选择页面中最后一个 div 元素，并将其文字颜色设置为红色。编译该Less代码后，可以看到最后一个 div 元素的文字颜色变为红色。

CSS 取最后一个元素