CSS 空格、波浪、加號、大於，是什麼意思？

波浪 aka 取代符號。

🕒 published on ー 2022. 1. 26.

Background by OKUMONO

Free Talk

這四個符號其實也是 CSS 選擇器的一種，名為「組合選擇器（Combinators）」，從連結的 MDN 文件可以看到，其實還有第五個，但它還在實驗階段，這就等未來再更新介紹吧。

初次聽到 選擇器 這名詞的時候，滿困惑的。我就只是在 CSS 檔案直接寫上 tag／.class／#id … 等等的文字而已啊，所謂的器在哪？我是指定哪有選擇？再加上組合二字，到底是什麼鬼 w

不理解專有名詞為什麼那樣叫，並不影響我寫 CSS 或任何程式語言，但我還是很想理出一個自己的想法來解釋它為什麼那樣叫。

我試著以電腦的角度去想，得到以下結論： tag／.class／#id … 等等的文字，對於 CSS 來說，只要拿著那一小段文字，就能在 HTML 樹海裡挑選到我們指定的元素，所以在 CSS 世界裡那就叫選擇器；組合選擇器，用單一符號來表示，代表某種進階挑選元素的機制， CSS 看到就知道要將放在它左右的選擇器要選的東西再去做一些篩選。

以上，純屬個人思路。

空格 aka 後代選擇器（Descendant Combinator）

假設我們的 Html & Css 如下，哪幾個 span 元素的背景會變亮綠色？

<div>
  <span>
    span#1
    <span>span#2</span>
  </span>
</div>
<span>span#3</span>
/* --- css --- */
<style>
  div span {
    background-color: lightgreen;
  }
</style>

Image by Chiyu

為什麼 span#3 背景沒變？因為 span#3 沒被包在 div 元素裡，非 div 元素的後代。

空格就是代表要選後代，要選誰的後代？被空格左邊選擇器選出的元素就代表祖先；那具體要選哪種後代？空格右邊的選擇器會告訴 CSS 要選哪種後代。

波浪 aka 一般兄弟姊妹選擇器（General Sibling Combinator）

接著我們又來一個 Html & Css 如下，這次會是哪幾個 span 元素的背景變金色？

<span>span#1</span>
<p>paragraph#1</p>
<span>span#2</span>
<span>span#3</span>
<code>code#1</code>
<span>span#4</span>
/* --- css --- */
<style>
  p ~ span {
    background-color: gold;
  }
</style>

Image by Chiyu

為什麼 span#1 背景沒變？它也是 p 元素的兄弟姊妹吧？是沒錯，不過因為 span#1 排在 p 元素前面，不是波浪符號要找的。

波浪符號是找之後的兄弟姊妹；以這題來說，意思就是 p 元素（由放左邊的 p 選擇器選出）之後的 span 元素（由放右邊的 span 選擇器選出）。

加號 aka 相鄰兄弟姊妹選擇器（Adjacent Sibling Combinator）

再來的 Html & Css 如下，猜猜哪個 li 元素的背景色會變鮭魚色？

<ul>
  <li>list item#1</li>
  <li>list item#2</li>
  <li>list item#3</li>
</ul>
/* --- css --- */
<style>
  li:first-of-type + li {
    background-color: salmon;
  }
</style>

Image by Chiyu

為何只有第二個，加號應該左邊 + 右邊一起變色吧？原因，你的加號不是你的加號（ry

加號在這邊代表相鄰！以這題來說，左到右解讀：要選第一個 li 元素緊鄰的下一個 li 元素（li 元素們要是兄弟姊妹才行）。加號是四個組合選擇器之中我最慢記住的，太少見又容易被加號就是相加這個直覺誤導。

大於 aka 子代選擇器（Child Combinator）

最後的 Html & Css 長這樣，來看看哪些 span 元素背景會變色吧！

<div>
  <span>span#1</span>
  <p>
    paragraph#1
    <span>sapn#2</span>
  </p>
  <span>span#3</span>
</div>
<span>span#4</span>
/* --- css --- */
<style>
  div > span {
    background-color: aqua;
  }
</style>

Image by Chiyu

為什麼 span#2、span#4 背景沒變？其實很簡單，子代嘛，span#2 是孫輩，不符合條件；span#4 就只是個路人更不符合。

大於符號是我早年剛接觸 CSS 之時最快記住、用起來最安心也最常用的符號，就是只有 兒女輩 才會被選中，孫輩以下 NO 速。

Ending

寫了個簡單的 CodePen，可以參考看看。 CSS 好玩的地方之一，就是可以用 Combo 技，像我就實際寫過像 nav > .nav-menu #mobile-nav-switch:checked ~ label > span:nth-child(1) 這樣的 CSS w