通用兄弟選擇器（Subsequent-sibling Combinator）用於選擇指定元素之後的所有符合條件的兄弟元素。

接著上次的家族故事，家裡的大哥、二姊、三妹和四弟這次又登場了。這回，二姊出去遛狗時順便買了些小蛋糕。不過，因為錢不夠，她只能分給弟妹們吃。於是，二姊之後的所有手足——三妹和四弟，這次都能一起享用美味的小蛋糕啦！不過可憐的大哥，只能看著大家吃啦～

💠 通用兄弟選擇器-基本用法

語法

1
2
3

選擇器1 ~ 選擇器2 {
  屬性名: 屬性值;
}

選擇器1 是要選中的基準元素。
選擇器2 是相鄰於 選擇器1 後面所有符合條件的兄弟元素。

範例

選中 .lala 類別後面的所有 <p> 元素

<p>Lala 的哥哥</p>
<p>Lala 的姊姊</p>
<p class="lala">Lala</p>
<p>Lala 的大妹</p>
<p>Lala 的小弟</p>
<p>Lala 的小妹</p>

1
2
3

.lala ~ p {
	color: red;
}

在此範例中，接在 .lala 類別之後的 <p> 都會變成紅色。

💠 實務應用：

假設有一個文章結構，並且希望在標題下方的所有段落文字中高亮顯示後續的所有段落元素：

<article>
  <h1>Lala Code</h1>
  <p>實地掌握RWD - 12小時新手實戰班</p>
  <p>如何用CSS控制移動端可視區域？使用lvh, svh, dvh單位優化網站</p>
  <p>用 CSS 打造酷炫的變形蟲效果-CSS教學</p>
  <p>clip-path製作box-shadow陰影無效!?你應該這樣做!</p>
  <div>
    <a href="/">上一頁</a>
    <a href="/">下一頁</a>
  </div>
</article>

h1 ~ p {
  background-color: #f0f0f0;
  padding: 10px;
}

See the Pen Subsequent-sibling Combinator2 by Lala (@bobee) on CodePen.

這樣，所有位於 h1 標題之後的 <p> 元素都會被選中，並且背景顏色將被設置為灰色，而其他的 <div> 或 <a> 元素則不受影響。

💠 總結

通用兄弟選擇器使用 ~ 符號可以選取基準元素之後的所有符合條件的兄弟元素。
到目前為止，我們學習了複合選擇器的交集選擇器、選擇器列表、後代選擇器、子代選擇器、相鄰兄弟選擇器、通用兄弟選擇器，複合選擇器到本篇告一段落，明天開始會開始介紹虛擬類別選擇器囉！

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

Day12-通用兄弟選擇器-前方無視，鎖定後排兄弟

💠 通用兄弟選擇器-基本用法

語法

範例

💠 實務應用：

💠 總結

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

🚀線上課程分享

Hahow

六角學院

Udemy