CSS 获取指定类名的最后一个元素|极客教程

CSS 获取指定类名的最后一个元素

在前端开发中，有时候我们需要通过CSS选择器来获取指定类名的最后一个元素，这在一些特定的布局和样式设计中非常有用。本文将详细介绍如何使用CSS选择器来获取指定类名的最后一个元素，并提供多个示例代码来帮助读者更好地理解。

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

:nth-last-child伪类选择器可以用来选择父元素下的倒数第n个子元素，我们可以结合该伪类选择器和指定的类名来获取最后一个元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS获取指定类名的最后一个元素</title>
<style>
    .item:last-child {
        color: red;
    }
</style>
</head>
<body>
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>
</body>
</html>

代码运行结果:

CSS 获取指定类名的最后一个元素

在上面的示例中，我们使用了:nth-last-child(1)来选择最后一个元素，并给其设置了红色的文字颜色。

2. 使用:last-of-type伪类选择器

:last-of-type伪类选择器可以用来选择父元素下的最后一个指定类型的子元素，我们可以结合该伪类选择器和指定的类名来获取最后一个元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS获取指定类名的最后一个元素</title>
<style>
    .item:last-of-type {
        font-weight: bold;
    }
</style>
</head>
<body>
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>
</body>
</html>

代码运行结果:

CSS 获取指定类名的最后一个元素

在上面的示例中，我们使用了:last-of-type来选择最后一个类型为.item的元素，并给其设置了加粗的字体样式。

3. 使用JavaScript结合CSS选择器

有时候我们需要动态地获取最后一个指定类名的元素，这时可以结合JavaScript来实现。我们可以通过querySelectorAll方法获取所有指定类名的元素，然后取最后一个元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS获取指定类名的最后一个元素</title>
<style>
    .item {
        color: blue;
    }
</style>
</head>
<body>
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>
<script>
    const items = document.querySelectorAll('.item');
    const lastItem = items[items.length - 1];
    lastItem.style.color = 'red';
</script>
</body>
</html>

代码运行结果:

CSS 获取指定类名的最后一个元素

在上面的示例中，我们使用了JavaScript来获取所有类名为.item的元素，并将最后一个元素的文字颜色设置为红色。

4. 使用jQuery选择器

如果项目中已经引入了jQuery库，我们也可以使用jQuery选择器来获取最后一个指定类名的元素。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS获取指定类名的最后一个元素</title>
<style>
    .item {
        font-size: 20px;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>
<script>
    $('.item:last').css('font-weight', 'bold');
</script>
</body>
</html>

代码运行结果:

CSS 获取指定类名的最后一个元素