1️⃣前言

今天的笔记内容是：

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

2️⃣并集选择器

• 问：并集选择器的用途是什么？
• 答：可以实现集体样式声明。

并集选择器就是将需要设置相同样式的HTML元素给分组选取出来，通过并集选择器的形式为它们定义相同的样式。

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

语法如下：

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

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

举个例子，看下列代码：

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

3️⃣组合选择器

组合选择器一般可以分为四种，分别是后代选择器、子选择器、相邻兄弟选择器和通用兄弟选择器。

🌳后代选择器

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

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

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

具体语法如下：

如上述代码所示：

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

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

🌱子选择器

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

子选择器语法如下：

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

举个例子：

效果如下：

备注：<section> 标签用于定义HTML文档中的章节、页眉、页脚等区段。

✨相邻兄弟选择器

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

语法如下：

上述语法的意思是，元素1和元素2是相邻兄弟的关系，二者的共同点在于具有相同的父级标签。此时用加号+将二者相连起来。

因此，“相邻兄弟”可以理解为“紧随其后的一个同级元素”。

举个例子：

效果如下：

💡通用兄弟选择器

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

语法如下：

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

举个例子：

效果如下：

📌总结

最后总结一下：

4️⃣写在最后

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