CSS :last-child 伪类详解|极客教程

CSS :last-child 伪类详解

在 CSS 中，:last-child 伪类用于选择某个元素的最后一个子元素。该伪类非常有用，可以帮助我们设计网页布局、样式化页面元素，让页面显示更加美观和合理。本文将详细介绍:last-child 伪类的用法和示例。

语法

:last-child 伪类的基本语法如下：

selector:last-child {
    /* styles */
}

其中，selector 是要选择的元素的父元素的选择器，:last-child 是要选择的元素的伪类名称。在上面的示例中，我们为选择器指定的父元素的最后一个子元素应用样式。

如何使用

考虑以下 HTML 结构的示例：

<div id="parent">
    <p>这是第一个子元素</p>
    <p>这是第二个子元素</p>
    <p>这是第三个子元素</p>
</div>

如果我们想为parent元素的最后一个p元素应用样式，我们可以使用:last-child 伪类如下：

#parent p:last-child {
    color: red;
}

在上面的代码中，我们为parent元素中最后一个p元素指定了红色的文字颜色。

示例代码

让我们通过一个更为具体的示例来理解:last-child 伪类的用法。假设我们有一个简单的导航菜单，我们想让最后一个菜单项有特殊的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .menu {
            display: flex;
            justify-content: space-between;
            background-color: #f8f9fa;
            padding: 10px;
        }

        .menu-item {
            padding: 5px;
            border: 2px solid black;
            border-radius: 5px;
        }

        .menu-item:last-child {
            background-color: #007bff;
            color: white;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="menu-item">Home</div>
        <div class="menu-item">About</div>
        <div class="menu-item">Contact</div>
    </div>
</body>
</html>