同級兄弟元素之間的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進行控制