用 “.page> p” 这个选择器就会把 .page 元素里面的 .footer 元素的字体变成灰色，但不会对 .article 元素下的 p 元素产生影响。

子元素选择器也是可以叠加使用的，还按上面的例子，假如我们想使用子元素选择器仅设置 .article 元素里面的 p 元素样式，我们就可以用下面的选择器来实现：

// CSS:
.page > .article > p{
    color: black;
}

Tips：
子元素选择器的作用和后代选择器相似，也是用来限制选择器生效的范围。它和后代选择器不同的是：
1. 子元素选择器只匹配子元素，不会匹配后代元素。在有确定的父子关系时，尽量使用子元素选择器，效率会比后代选择器高。
2. 使用子元素选择器还可以避免对非直接后代的样式影响，在只想给子元素设置样式时会比后代选择器安全。

三、兄弟选择器

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

• 相邻兄弟选择器

相邻兄弟选择器是用来选取某个元素紧邻的兄弟元素，它的语法是 “选择器 A + 选择器 B”，表示找到与 A 元素相邻的 B 元素。其实就是对选择器 B 加上 “紧邻着选择器 A” 的限制。一下面的代码为例：

<!-- HTML -->
<div class="article">
    <p>黑化肥与灰化肥</p>
    <h1>我是标题部分</h1>
    <p>黑化肥发灰，灰化肥发黑</p><!--生效-->
    <p>黑化肥发灰会挥发；灰化肥挥发会发黑</p>
    <p>黑化肥挥发发灰会花飞；灰化肥挥发发黑会飞花</p>
</div>
// CSS
h1 + p{
    margin-top: 10px;
    color: red;
} 

上面的例子中，h1 + p 选择器就表示选择紧邻 h1 元素的 p 元素，让这个 p 元素距离标题隔开 10px，并且字体设置为红色。这里要注意，相邻选择器只能选择紧挨在 h1 后面的 p 元素，而不能向前找。

Tips：
相邻兄弟选择器通常有两类用处：
1. 用于自动调整占位，比如后面在布局的时候，有 header 和没 header 情况下内容区的高度会不同，就可以使用相邻兄弟选择器来控制内容区的高度。
2. 相邻兄弟选择器的第二种用法是用来控制相同元素中间的间隔，比如在 List 组件开发时，每个 li 元素之间要加上分割线的需求就会通过相邻兄弟选择器来实现。

<!-- HTML -->
<div class="article">
    <p>黑化肥与灰化肥</p>
    <h1>我是标题部分</h1>
    <p>黑化肥发灰，灰化肥发黑</p><!--red-->
    <p>黑化肥发灰会挥发；灰化肥挥发会发黑</p><!--red-->
    <p>黑化肥挥发发灰会花飞；灰化肥挥发发黑会飞花</p><!--red-->
</div>

// CSS
h1 ~ p{
    color: red;
} 

交集选择器是为了找两个或多个选择器的交集，用法就是把两个选择器放在一起，形式如 “选择器 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 给当前活跃的菜单选项一个特殊的标记。在这个例子里，交集选择器有两个意思，一方面是把选择器限定在 .menu-item 范围内，另一方面是选中范围内比较特殊的 .active 元素。

五、并集选择器

并集选择器是为了合并类似的样式，可以把选择器不同但样式相同的 CSS 语法块做合并。并集选择器就是用逗号分割多个选择器，形式如 “选择器 A, 选择器 B”，表示该样式对选择器 A 和选择器 B 所选择的元素都生效。

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

上面的样式是希望把 h1，h2 和 h3 的内外边距都归零，来解决不同浏览器中元素默认的内外边距不一致的问题。这种写法会占用很多 CSS 代码量，但是可以通过并集选择器来进行简化：

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