CSS通用兄弟选择器，匹配同级所有元素
CSS通用兄弟选择器是什么意思
CSS通用兄弟选择器中的“通用兄弟”是什么概念呢，比如<div><p><b></b></p><span></span><a></a></div>中，元素p的兄弟元素包括span和a两个元素，span的兄弟元素则是p和a，同样的道理a的兄弟元素是p和span，它们在同一级，都是div的子元素，而元素b则是div的子元素的子元素。CSS通用兄弟选择器则是通过HTML元素的同级关系对元素进行选择获取。
CSS通用兄弟选择器的语法
A ~ B { 样式设置 }
提示："~"符号的位置：mac键盘在字母Z的左边，windows键盘在数字1的左边，使用的时候输入法需要切换为英文模式。
CSS通用兄弟选择器实例代码，及在线编辑器
<div><p id='e1'><b>这是元素b</b>，这里是段落p</p><span>这是span1</span><br><span>这是span2</span><br><a>这是a标签</a></div>
<style>
#e1 ~ span{color:skyblue}
/* 运行后会发现a标签内的内容并没有被设置样式，为什么呢，看看是下方的代码解析 */
</style>实例代码解析
实例中css注释部分的问题是因为上例中的CSS通用兄弟选择器只是选择了对照#e1元素的所有同级的span元素，并不包括标签a元素，那么该如何用CSS的通用选择器选择同级的所有兄弟元素呢？
CSS通用兄弟选择器选择同级的所有兄弟元素的方法
可以通过通配符“*”来选择，实例代码如下：
<div><p id='d1'><b>这是div的子元素的子元素b</b>，这里是段落p</p><span>这是span1</span><br><b>这是div子元素b</b><br><a>这是a标签</a></div>
<p>这是div之外的元素p，可以用来对照通用兄弟选择器内的通配符“*”并没有选择了HTML的所有元素。，只是选择匹配了同级内的所有兄弟元素。</p>
<style>
#d1 ~ *{color:skyblue}
</style>