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

相关阅读:
【题解】21. 合并两个有序链表 (链表)
【源码】Vue.js 官方脚手架 create-vue 是怎么实现的？
一段代码实现WordPress彩色标签云
Rabin Karp 算法详解及Python实现
基于51单片机六车道智能交通灯设计（仿真+源程序+PCB+论文）
今年的 618 不行了？
2022.10.1
Linux进阶-Shell编程
Vue（三）：样式绑定、条件渲染、列表渲染、列表过滤与列表排序
[iOS]-NSOperation、NSOperationQueue

原文地址：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`