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 元素，而不能向前找。下面就是运行的结果：

从例子中可以看到，只有紧挨着 h1 元素的 p 标签有了 10px 的上边距，而且字体变红了。

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