.box + .box 意思就是：选择紧邻第一个box元素的同胞box元素。
这俩类名一样，解释起来有点混乱。
我举个例子。
例如：
<div class="box1"></div>
<h1 class="h1-1">标题</h1>
<div class="box2">
<h1 class="h1-2">标题</h1>
<p>文章段落</p>
</div>
如果我这么写：.box1 + h1 ,那么我选择的就是类名叫.h1-1的元素。
如果：.box2 + h1 ,它不会选择任何元素，因为.box2的下面没有一个叫h1的同胞元素。
如果：h1 + div ,那么会选择.box2的div元素。
第一个元素 + 第二个元素
这个选择器只会选择 紧邻第一个元素 并且是在第一个元素下面的同胞级元素
上面那段代码，如果你写 ：.box1 + .box2 将没有效果，因为他们中间夹了个h1元素。
但是有一个选择器可以实现，就是.box1 ~ .box2 同胞选择器。
能力有限，不知帮到了吗？
~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。
h3~h5选择前面有<h3>元素的每个<h5>元素，即选择h3之后出现的所有h5，两种元素必须拥有相同的 父元素 ，但h5不必紧随h3。
说明：这里的h5，h3也可以换成实际项目中的其他标签的类名、标签名或id等。
~（加号）加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素，且A和B必须拥有相同的父元素，所选到的仅为一个B元素标签。
大于号表示某个元素的下一代元素。A>B指选择A元素里面的B元素，其中B元素是A元素的第一代。
.myDiv>h3选择类名名为myDiv里面的第一代h3。
1.~波浪号
A~B 选择A标签后的所有B标签，【A和B必须是相同的父元素】
2.+（兄弟选择器）
A+B 选择紧邻在A后面的B元素，【A和B必须拥相同的父元素】所选的仅为一个B元素标签
3.>大于号
A>B 选择A元素里面的B元素【B元素是A元素下的第一代，只第一后代】
