CSS选择器之复合选择器的简单使用

参考：https://www.w3school.com.cn/,immoc Rosen的UI专栏

用空格分隔的多个选择器组合，语法形式就是：“选择器 A 选择器 B”，表示在A 选择器的后代元素中找到 B 选择器所指的元素（这个范围内的所有后台）

上面的后代选择器就会把 class 为 root元素里面的所有span 元素的字体都改成 红色

TIps: 后台选择器可以叠加使用，如只想让第二层的span变成红色

子元素选择器和后代选择器类似，也是为选择器限定范围。不同的是子元素选择器只找子元素，而不会把所有的后代都找一遍。它的语法是 “选择器 A> 选择器 B”

用 “…root > span” 这个选择器就会把 .root元素里面的 .first-child-span元素的字体变成灰色，但不会对 .first-child-dev元素下的 span 元素产生影响。

Tips:子元素选择器也是可以叠加使用，还按上面的例子，如只想对first-child-dev中的span起作用

在 CSS 中，还有一种选择器是用来选取同级元素的，叫做兄弟选择器。兄弟选择器有两种，一种是相邻兄弟选择器，另外一种是通用兄弟选择器

1.相邻兄弟选择器

相邻兄弟选择器是用来选取某个元素向下紧邻的兄弟元素，它的语法是 “选择器 A + 选择器 B”，其实就是对选择器 B 加上 “紧邻着选择器 A” 的限制

这样只会让紧邻h1下面的一个span变成红色，上面的span不会起作用

补充一个例子：

上面这个选择器只会把列表中的itme2和item3列表项变为粗体。第一个列表项不受影响。

item2: item1向下紧邻的item2 item3: item2向下紧邻的item3 2.通用兄弟选择器

通用兄弟选择器会匹配选择器 A 指定元素后面的所有符合选择器 B 规则的元素，它的语法是 "选择器 A ~ 选择器 B"

上面的选择器会选中和 h1 元素同级且在 h1 元素后面出现的 span 元素表现成红色字体的样式

结合其他选择器

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

TIps:兄弟选择器（包括相邻兄弟选择器和通用兄弟选择器）中都是只能向后选择，如果需要向前选择，就只能给前面的元素指定上 class，再用类选择器来实现了

交集选择器是为了找两个或多个选择器的交集，用法就是把两个选择器放在一起，形式如 “选择器 A 选择器 B”，中间不需要加空格或者其他符号。交集选择器最主要的作用是在限定范围内标识特殊的样式。比如：

通过 .menu-item 给所有菜单元素一个基础样式，然后通过交集选择器 .menu-item.active 给当前活跃的菜单选项一个特殊的标记

并集选择器是把选择器不同但样式相同的 CSS 语法块做合并，它的语法是 “选择器 A, 选择器 B”，表示该样式对选择器 A 和选择器 B 所选择的元素都生效

这种写法会占用很多 CSS 代码量，但是可以通过并集选择器来进行简化