css :first-child 和 :first-of-type

最新推荐文章于 2024-05-15 18:00:00 发布

梦想身高1米8

最新推荐文章于 2024-05-15 18:00:00 发布

阅读量423

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_43915401/article/details/127871136

版权

1 `:first-child`

p:first-child {
    background-color:yellow;
}

阅读理解：元素的背景设为黄色 + 第一个子元素的背景设为黄色 = 父元素的第一个子元素是时，该子元素背景设为黄色
举个栗子：

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

在这里插入图片描述

2 `:first-of-type`

p:first-of-type {
    background:#ff0000;
}

阅读理解：元素的背景设为黄色 + 第一个类型元素的背景设为黄色 = 父元素的子元素中，第一个元素背景设为黄色，不一定要是第一个子元素噢
举个例子：

<!DOCTYPE html>
<html>
<head>
    <style>
        p:first-of-type {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h5>这个段落是其父元素（body）的第一个子元素</h5>
    <p>这个段落是其父元素（body）的第一个p子元素</p>
    <p>这个段落是其父元素的第二个p子元素。</p>
    <div>
        <h5>这个段落是其父元素（div）的第一个子元素</h5>
        <p>这个段落是其父元素（div）的第一个p子元素</p>
        <p>这个段落不是其父元素的第二个p子元素。</p>
    </div>
</body>
</html>

在这里插入图片描述

参考、实践地址：
https://www.w3school.com.cn/cssref/selector_first-child.asp
https://www.w3school.com.cn/cssref/selector_first-of-type.asp

梦想身高1米8

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css :first-child 和 :first-of-type

元素的背景设为黄色 + 第一个子元素的背景设为黄色 = 父元素的第一个子元素是。类型元素的背景设为黄色 = 父元素的子元素中，第一个。元素背景设为黄色，不一定要是第一个子元素噢。元素的背景设为黄色 + 第一个。时，该子元素背景设为黄色。
复制链接

扫一扫