CSS选择器之:first-child,:last-child

最新推荐文章于 2024-06-13 10:12:21 发布

爪哇犀牛

最新推荐文章于 2024-06-13 10:12:21 发布

阅读量3.4k

点赞数 1

分类专栏： CSS javaScript 文章标签：选择器

本文链接：https://blog.csdn.net/Qin_Shuo/article/details/82019787

版权

javaScript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

定义

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

提示：p:last-child 等同于 p:nth-first-child(1)。

:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

提示：p:last-child 等同于 p:nth-last-child(1)。

直接看定义稍微有点绕，定义中最关键的就是属于其父元素。如果不能理解的话我们通过几个经典的例子来让大家豁然开朗。

实例

first-child和last-child基本相同，我们通过看:last-child一并学习吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css.css"/>
    <style>
        button:last-child{
            width: 40px;
            height: 40px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div class='level-1'>
    <button>我的父级是level-1</button>
    <div class="level-2-1">
        <button>我的父级是level-2-1</button>
        <button>我的父级是level-2-1</button>
        <button>我的父级是level-2-1</button>
        <button>我的父级是level-2-1</button>
        <button>我的父级是level-2-1</button>
    </div>
    <div class="level-2-2">
        <button>我的父级是level-2-1</button>
        <button>我的父级是level-2-1</button>
        <button>我的父级是level-2-1</button>
        <button>我的父级是level-2-1</button>
        <button>我的父级是level-2-1</button>
    </div>
    <button>我的父级是level-1</button>
</div>
</body>
<script src="js/require.js" data-main="main" type="text/javascript"></script>
</html>

通过上面的例子我们很容易看出来last之间的关系，看似明白了那我们接下来继续看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css.css"/>
    <style>
        button:last-child{
            min-width: 40px;
            min-height: 40px;
            background-color: aqua;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div class='level-1'>
    <button>我的父级是level-1</button>
    <div class="level-2-1">
        <button>level-2-1-btn</button>
        <button>level-2-1-btn</button>
        <button>level-2-1-btn</button>
        <button>level-2-1-btn</button>
        <button>level-2-1-btn-last</button>
        <span>level-2-1-p-last</span>
    </div>
    <div class="level-2-2">
        <button>level-2-2-btn</button>
        <button>level-2-2-btn</button>
        <button>level-2-2-btn</button>
        <button>level-2-2-btn</button>
        <button>level-2-2-btn-last</button>
        <div class="level-2-2-1">
            <button>level-2-2-1</button>
            <button>level-2-2-1</button>
            <button>level-2-2-1</button>
            <button>level-2-2-1</button>
            <button>level-2-2-1-last</button>
        </div>
    </div>
    <button>level-1-btn-last</button>
    <p>level-1-p-last</p>
</div>
</body>
<script src="js/require.js" data-main="main" type="text/javascript"></script>
</html>

是不是有点疑问，为什么只有一个btn生效。我们用button做详解，其他的都同理

button:last-child寻找select的父级元素，直到查到body；
根据父级元素查找其最后一个子元素A；
对比该子元素A和button是否为同一类型，如果是则生效，否则不生效；

如果能看懂最后一个例子，那么对于last-child就出师了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css.css"/>
    <style>
        :last-child{
            min-width: 40px;
            min-height: 40px;
            border:3px dashed rebeccapurple;
            border-radius: 10px;
            color: #f5293e;
        }
    </style>
</head>
<body>
<div class='level-1'>
    <button>我的父级是level-1</button>
    <div class="level-2-1">
        <button>level-2-1-btn</button>
        <button>level-2-1-btn</button>
        <button>level-2-1-btn</button>
        <button>level-2-1-btn</button>
        <button>level-2-1-btn-last</button>
        <span>level-2-1-p-last</span>
    </div>
    <div class="level-2-2">
        <button>level-2-2-btn</button>
        <button>level-2-2-btn</button>
        <button>level-2-2-btn</button>
        <button>level-2-2-btn</button>
        <button>level-2-2-btn-last</button>
        <div class="level-2-2-1">
            <button>level-2-2-1</button>
            <button>level-2-2-1</button>
            <button>level-2-2-1</button>
            <button>level-2-2-1</button>
            <button>level-2-2-1-last</button>
        </div>
    </div>
    <button>level-1-btn-last</button>
    <p>level-1-p-last</p>
</div>
</body>
<script src="js/require.js" data-main="main" type="text/javascript"></script>
</html>

爪哇犀牛

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器之:first-child,:last-child

定义:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。提示：p:last-child 等同于 p:nth-first-child(1)。:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。提示：p:last-child 等同于 p:nth-last-child(1)。直接看定义稍微有点绕，定义中最关键的就是属于其父元素。如果不能...
复制链接

扫一扫

专栏目录