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

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

后代选择器

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

<!-- HTML -->
<div class="root">
	<div class="first-child-dev">
		<span class="second-child-span">我是第二层的span<span>
		<span class="second-child-span">我是第二层的span<span>
		<span class="second-child-span">我是第二层的span<span>
	</div>
	<span class="first-child-span">我是第一层的span</span>
</div>

// CSS:
.root span{
   color: red
}

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

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

.root .first-child-dev span {
	 color: red
}

子元素选择器

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

<!-- HTML -->
<div class="root">
	<div class="first-child-dev">
		<span class="second-child-span">我是第二层的span<span>
		<span class="second-child-span">我是第二层的span<span>
		<span class="second-child-span">我是第二层的span<span>
	</div>
	<span class="first-child-span">我是第一层的span</span>
</div>

// CSS:
.root > span{
   color: red
}

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

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

.root > .first-child-dev span{
   color: red
}

兄弟选择器

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

1.相邻兄弟选择器

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

<!-- HTML -->
<div class="root">
	<div class="first-child-dev">
		<span class="second-child-span">我是第二层的span<span>
		<h1>我是第二层的h1</h1>
		<span class="second-child-span">我是第二层的span<span>
		<span class="second-child-span">我是第二层的span<span>
	</div>
	<span class="first-child-span">我是第一层的span</span>
</div>

// CSS:
h1 + span {
   color: red
}

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

补充一个例子：

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

li + li {font-weight:bold;}

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

item2: item1向下紧邻的item2
item3: item2向下紧邻的item3

2.通用兄弟选择器

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

<!-- HTML -->
<div class="root">
	<div class="first-child-dev">
		<span class="second-child-span">我是第二层的span<span>
		<h1>我是第二层的h1</h1>
		<span class="second-child-span">我是第二层的span<span>
		<span class="second-child-span">我是第二层的span<span>
	</div>
	<span class="first-child-span">我是第一层的span</span>
</div>

// CSS:
h1 + span {
   color: red
}

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

结合其他选择器

html > body table + ul {margin-top:20px;}

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

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

交集选择器

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

<!-- HTML -->
<div class="menu">
    <a class="menu-item">菜单1</a>
    <a class="menu-item active">菜单2</a>
    <a class="menu-item">菜单3</a>
    <a class="menu-item">菜单4</a>
</div>

// CSS
.menu-item{
    background: #ccc;
    color: #000;
}
.menu-item.active{
    background: #aaa;
    color: #fff;
}

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

并集选择器

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

// CSS
h1{
    margin: 0;
    padding: 0;
}
h2{
    margin: 0;
    padding: 0;
}
h3{
    margin: 0;
    padding: 0;
}

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

h1, h2, h3{
    margin: 0;
    padding: 0;
}