这篇文章主要讲解css中兄弟选择器的使用，以及+和~的区别有哪些？如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
+选择器的使用
比如：
<styletype="text/css">
h1+p{
margin-top:50px;
color:red;
}
</style>
<p>Thisisparagraph.</p>
<h1>Thisisaheading.</h1>
<p>Thisisparagraph.</p>
<p>Thisisparagraph.</p>
效果图如下：
兄弟选择器只会影响下面的p标签的样式，不影响上面兄弟的样式。
注意这里的’+’的意义跟’and’意义不一样，兄弟选择器的样式是应用在兄弟元素上，跟参照的元素样式无关，如上例只影响p元素的样式，而不影响h1标签的样式。当然这个也会循环查找，即当两个兄弟元素相同时，会一次循环查找：
<styletype="text/css">
li+li{
color:red;
}
</style>
<div>
<ul>
<li>Listitem1</li>
<li>Listitem2</li>
<li>Listitem3</li>
</ul>
</div>
效果如下：
Listitem1
Listitem2
Listitem3
可以看出第一个li字体颜色没有变红，第二个和第三个元素字体变红，这就是因为第三个li是第二个li的兄弟元素，所以也会应用样式。
~选择器的使用
作用是查找某一个指定元素的后面的所有兄弟结点。示例代码：
<styletype="text/css">
h1~p{
color:red;
}
</style>
<p>1</p>
<h1>2</h1>
<p>3</p>
<p>4</p>
<p>5</p>
总之，css中兄弟选择器给大家简单的介绍了一些，希望大家多看看。