同級兄弟元素之間的CSS控制

為了實現這個導航效果：選中菜單中某一項，隱藏掉自身的左邊背景線條，同時讓他的下一個兄弟元素也隱藏掉線條。

 

有一種選擇器就叫兄弟元素選擇器，分為臨近兄弟和普通兄弟。

臨近兄弟：用 ＋ 表示，只匹配該元素后邊的第一個同級元素。
普通兄弟：用 ～ 表示，匹配該元素后邊的所有同級元素。

給個例子：

<style>
div#aa { }
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 { color: #0f0; font-weight: bold; }
</style>

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

當把p的class設為on的時候，span的樣式也跟着改變。