同级兄弟元素之间的CSS进行控制

标签：font   控制   元素   例子   样式   匹配   改变   一个   color   

临近兄弟：用 + 表示，只匹配该元素后边的第一个同级元素。

普通兄弟：用 ~ 表示，匹配该元素后边的所有同级元素。

例子：

　　<style>
　　　　div#aa p{
　　　　　　font-size:14px;
　　　　　　color:#000;
　　　　}
　　　　div#aa p.on{
　　　　　　color:#f00;
　　　　}
　　　　div#aa p.on ~span{
　　　　　　color:#00f;
　　　　}
　　　　div#aa p.on +span{
　　　　　　font-weight:bold;
　　　　}
　　</style>

　　<div id="aa">
　　　　<p class="on">sdf</p>
　　　　<span>sdf</span>
　　　　<span>sdf</span>
　　</div>

//当把p的class设为on的时候，span的样式也跟着改变。

同级兄弟元素之间的CSS进行控制

标签：font   控制   元素   例子   样式   匹配   改变   一个   color   

原文地址：http://www.cnblogs.com/rachelch/p/7459601.html