CSS 同層選取器 ~：選取其後的所有兄弟元素
使用 ~ 區隔兩個元素，選取 HTML 文件上某個元素同層且位於其後的所有兄弟元素。
以下案例便是利用 同層選取器 將對象選取出來並進行樣式的改變。
小提醒
同層選取器 只會選取目標元素後的兄弟元素，並不包含目標元素本身。
與鄰接同層的差別
html
<h2>標題</h2>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>css
h2 ~ p { color: red; } /* 三段都變紅 */
h2 + p { color: red; } /* 只有第一段變紅 */~ 一次影響後面所有兄弟，+ 只認緊接著的那一個，詳見 鄰接同層選取器。
常見的互動寫法
搭配 偽類 可以做出不寫 JavaScript 的展開效果：
css
/* 核取方塊被勾選時，顯示它後面的內容區 */
.toggle:checked ~ .panel {
display: block;
}小提醒
同層選取器 只會選取目標元素後的兄弟元素，並不包含目標元素本身。
常見問題
同層和鄰接同層差在哪？
~ 選取其後的所有兄弟，+ 只選緊接著的下一個。要一次影響後面全部就用 ~。
可以選到前面的兄弟元素嗎？
傳統選取器只能往後選。要往前影響，通常得調整 HTML 順序再用視覺順序反轉，或改用支援關聯選取的新語法。
它會選到目標元素自己嗎？
不會。同層選取器只挑符合條件的兄弟，目標元素本身不在選取範圍內。
