1、CSS兄弟相邻选择器加号
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。
CSS兄弟相邻选择器加号，举例说明
HTML代码
<p>这里是第一个P标签</p><p>这里是第二个P标签</p><h2 class = 'h2'>标题H2</h2><p>这里是第一个P标签</p><p>这里是第二个P标签</p><p>这里是第三个P标签</p><p>这里是第四个P标签</p>CSS代码
.h2 + p{color: red
}
2、CSS兄弟选择器~(匹配选择器)
'~'匹配所有在指定元素之后的同级某个元素
举例说明一个，CSS的匹配选择器
HTML代码
<p>这里是第一个P标签</p><p>这里是第二个P标签</p><h2 class = 'h2'>标题H2</h2><p>这里是第一个P标签</p><p>这里是第二个P标签</p><p>这里是第三个P标签</p><p>这里是第四个P标签</p>CSS代码
.h2 ~ p{color: red
}
3、总结：
CSS中的兄弟选择符号‘~’，可以选择指定元素后的，同级的相同的所有元素。比如上面的示例，所以h2标签后的P标签全部被选择，并加入了样式
通过这两个例子，可以发现虽然这两个选择器都表示兄弟选择器，但是‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。
其他选择器可参考
应该进行初始化，如果没有很多元素默认会存在margin或padding。因此建议在css第一行添加*{margin:0pxpadding:0px}。再有如果你的上下相邻的div里面的第一个标准流元素有margin-top相关设定，那么这个相邻元素也会有空隙兄弟组件怎么粘在一起css对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解:
可选择紧接在另一个元素后的元素，且二者有相同的父级元素 下面代码中，item2和item3会有效果，而item1不会有
HTML代码：
item1
item2
item3
CSS代码：li+li { font-size: 50px}
1、如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
2、相邻兄弟选择器使用加号“+”做为连接符。
示例
#p1 + p {
margin-top: 50px
}
This is paragraph 1.
This is paragraph 2.
This is paragraph 3.
This is paragraph 4.
