【CSS】你还记得组合选择器怎么用吗？
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、写在最后
好了，今天的笔记就到这里。
版权声明: 本文为 InfoQ 作者【翼同学】的原创文章。
原文链接:【http://xie.infoq.cn/article/15c6abdd8e791caa291a3f7a0】。文章转载请联系作者。
知行合一 2022.08.02 加入
@珠海科技学院
评论