学习记录 --【零基础CSS学习】06.第一和最后子元素选择器

本文链接：https://blog.csdn.net/m0_37612107/article/details/124708330

第一和最后子元素选择器

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

直接从示例中了解具体用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最后子元素选择器</title>
    <style type="text/css">
        /*第一子元素选择器*/
        h3:first-child{
            /*选择的是h3元素的父元素中，是h3的第一个子元素,如果第一个元素不是h3，则失效，不会选中任何元素*/
            color: red;
        }

        /*最后子元素选择器*/
        div:last-child{
            color:blue;
        }
    </style>
</head>
<body>
    <h3>我是第一个h3元素</h3><!-- 第一个元素是h3元素才可以选中 -->
    <h3>我是第二个h3元素</h3>
    <p>我是P元素1</p>
    <p>我是P元素2</p>
    <div>我是div元素1</div>
    <div>我是div元素2</div><!-- 最后一个元素是div元素才可以选中 -->
</body>
</html>

注意：

first-child 选择器选中的是所有符合要求的元素，不是选中一个后就结束的，会一直筛选到代码结束。

示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        p:first-child{
            background-color:yellow;
        }
    </style>
</head>
<body>
    <p>这个段落是其父元素（body）的首个子元素。</p>

    <h1>欢迎访问我的主页</h1>
    <p>这个段落不是其父元素的首个子元素。</p>

    <div>
        <p>这个段落是其父元素（div）的首个子元素。</p>
        <p>这个段落不是其父元素的首个子元素。</p>
    </div>

    <p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 <!DOCTYPE>。</p>

</body>
</html>