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

1 `:first-child`

p:first-child {
    background-color:yellow;
}
1
2
3

阅读理解：

元素的背景设为黄色 + 第一个子元素的背景设为黄色 = 父元素的第一个子元素是

时，该子元素背景设为黄色
举个栗子：

DOCTYPE html>
<html>
<head>
    <style>
        p:first-child {
            background-color: yellow;
        }
    style>
head>
<body>
    <p>这个段落是其父元素（body）的首个子元素, 且为pp>
    <p>这个段落是其父元素的第二个子元素。p>
    <div>
        <p>这个段落是其父元素（div）的首个子元素，且为pp>
        <p>这个段落不是其父元素的第二个子元素。p>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

2 `:first-of-type`

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

阅读理解：

元素的背景设为黄色 + 第一个

类型元素的背景设为黄色 = 父元素的子元素中，第一个

元素背景设为黄色，不一定要是第一个子元素噢
举个例子：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述

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

相关阅读:
IDEA开发快捷键
神经网络算法知乎,图神经网络知乎
暴雪和网易分手百万玩家何去何从
什么是整体设备效率（OEE）？
软考-高级-信息系统项目管理师教程第四版【第15章-项目风险管理-思维导图】
嵌入式操作Sqlite的8条建议
【NOWCODER】- Python：列表（二）
前端技术知识（含八股）总结 - 持续更新中
java-GUI编程之AWT组件
计算点云每个点的粗糙度（附open3d python代码）

原文地址：https://blog.csdn.net/weixin_43915401/article/details/127871136

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

1 :first-child

2 :first-of-type

1 `:first-child`

2 `:first-of-type`