【CSS】你还记得组合选择器怎么用吗？

大家好，我是翼同学！

1️⃣前言

今天的笔记内容是：

并集选择器以及组合选择器

2️⃣并集选择器

通过并集选择器，可以实现集体样式声明，也就是分组，将需要设置相同样式的HTML元素给选取出来，为它们定义相同的样式。

注意，任何形式的选择器都可以作为并集选择器的一部分。

语法如下：

元素1,
元素2,
元素3 {
	样式声明...;
}
1
2
3
4
5

并集选择器的语法是各个选择器之间用逗号隔开（我喜欢竖着写），最后一个选择器不需要加逗号。

可以看出，通过并集选择器可以有效减少重复代码量。

举个例子，看下列代码：

div {
    color: skyblue;
    text-align: center;
}
h1 {
    color: skyblue;
    text-align: center;
}
p {
    color: skyblue;
    text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12

使用并集选择器可以写成下面代码：

div,
h1,
p {
    color: skyblue;
    text-align: center;
}
1
2
3
4
5
6

3️⃣组合选择器

🌳后代选择器

后代选择器又称包含选择器。

当标签有嵌套关系时，内层标签就是外层标签的后代。

我们通过后代选择器来可以选择标签内层中的子元素。

具体语法如下：

元素1 元素2 { 
	样式声明
}
1
2
3

如上所示：将父标签也就是元素1写在外头，子代标签写在后面，中间用空格隔开。最终选择的是元素2。

注意：元素1和元素2可以是任意基础选择器，只要是元素2是元素1的后代就行。

DOCTYPE html>
<html>
<head>
    <style>
        div p { color: skyblue;}
    style>
head>
<body>
    <div>
        <p>段落一p>
        <p>段落二p>
        <section>
            <p>段落三p>
        section>
        <p>段落四p>
        <p>段落五p>
    div>
        <p>段落六p>
        <p>段落七p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

🌱子选择器

子元素选择器用于选择距离某元素最近的一级子元素。简单的说，子元素选择器就是用于匹配指定标签的子元素的所有元素。

子选择器语法如下：

元素1 > 元素2 {
	样式声明
}
1
2
3

上述代码表示元素1是父级标签，元素2是子级标签，最终选择的是元素2，并且元素2必须是嵌套在元素1里头的距离元素1最近的元素。而且在子选择器中，元素之间用大于号>隔开。

举个例子：

DOCTYPE html>
<html>
<head>
    <style>
        div > p { color: skyblue;}
    style>
head>
<body>
    <div>
        <p>段落一p>
        <p>段落二p>
        <section>
            <p>段落三p>
        section>
        <p>段落四p>
        <p>段落五p>
    div>
        <p>段落六p>
        <p>段落七p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

效果如下：

备注：

标签用于定义HTML文档中的章节、页眉、页脚等区段。

✨相邻兄弟选择器

相邻兄弟选择器就是用于匹配与指定标签相邻（同级）的标签。

语法如下：

元素1 + 元素2 { 样式声明; }
1

上述语法的意思是，元素1和元素2是相邻兄弟的关系，二者的共同点在于具有相同的父级标签。此时用加号+将二者相连起来。因此，“兄弟”可以理解为同级，“相邻”可以理解为“紧随其后”。

举个例子：

DOCTYPE html>
<html>
<head>
    <style>
        div + p { color: skyblue;}
    style>
head>
<body>
    <p>段落一p>
    <p>段落二p>
    <div>
        <p>段落三p>
        <p>段落四p>
    div>
    <p>段落五p>
    <p>段落六p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果如下：

💡通用兄弟选择器

与相邻兄弟选择器不同在于，通用兄弟选择器匹配了与指定标签同级的所有标签。

语法如下：

元素1 ~ 元素2 { 样式声明; }
1

在上述语法中，用~号将两个元素相连起来，表示元素1和元素2是兄弟关系，最终选择的是元素2，将和元素1同级的所有元素2都选择出来进行样式修改。

举个例子：

DOCTYPE html>
<html>
<head>
    <style>
        div ~ p { color: skyblue;}
    style>
head>
<body>
    <p>段落一p>
    <p>段落二p>
    <div>
        <p>段落三p>
        <p>段落四p>
    div>
    <p>段落五p>
    <p>段落六p>
    <section><p>段落七p>section>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果如下：

📌总结

最后来个总结：

符号	含义
`,`	并集组合器，用于设置集体样式，为多个标签设置相同样式
`空格`	后代选择器，用于匹配任意后代元素
`>`	子选择器，用于匹配子级元素，而不是任意的后代元素
`+`	相邻兄弟选择器，用于匹配紧跟其后的一个同级元素
`~`	通用兄弟选择器，用于匹配紧跟其后的所有同级元素

4️⃣写在最后

好了，今天的笔记就到这里。

相关阅读:
原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载（且规避乱码），解决导出Excel文件里面有[object Object]。
【从零开始学习 SystemVerilog】11.1、SystemVerilog 断言—— Assertions Introduction（断言概述）
剑指 Offer 37. 序列化二叉树
计算机网络必考题
【Godot4自学手册】第四十四节用着色器（shader）实现溶解效果
项目问题-常见错误
Linux篇12文件系统inode和软硬链接
微软Surface/Surface pro笔记本电脑进入bios界面
【ITRA】2022年ITRA赛事注册流程从0-1
Compose 动画艺术探索之 AnimationVector

原文地址：https://blog.csdn.net/m0_62999278/article/details/126033904

【CSS】你还记得组合选择器怎么用吗？

目录

1️⃣前言

2️⃣并集选择器

3️⃣组合选择器

🌳后代选择器

🌱子选择器

✨相邻兄弟选择器

💡通用兄弟选择器

📌总结

4️⃣写在最后