CSS 基礎系列 2 - CSS 選擇器

深入探索 CSS 的基本選擇器，從 Type、Class、ID 到 Attribute 選擇器，並詳細介紹組合選擇器如後代、子元素和兄弟選擇器的使用方法。文章還涉及了尚在實驗階段的 Column combinator。完整指南幫助開發者更有效地選擇和樣式化元素。

Basic Selector Type 基本選擇器

Type selector (標籤)

使用 element 的 node name 來選擇所有的 html element，例如 p 可以選擇所有 <p></p> 的 element。

Class selector (類別)

使用 class 來選擇所有的符合的 element，在類別選擇器中需要加上 . 的前綴，如 .card 就會選擇所有 class="card" 的 element。

ID selector

使用 id 來選擇所有的符合的 element，在 id 選擇器中需要加上 # 的前綴，如 #app 就會選擇 id="app" 的 element，而通常 id 是獨一無二的。

Attribute selector (屬性)

選取屬性符合的 element，在 Attribute 選擇器中需要用 [] 包覆起來，如 [type="submit"] 就會選擇屬性中 type="submit" 的元素，另外這個選擇器有很多進階的用法，如用超連結的前綴判斷，更多可以參考 MDN Attribute。

Combinator 組合選擇器

Descendant combinator (後代)

使用空格來選擇後代，如 div p 就會選擇所有 <div> 內的 <p>。

<div>
  <!-- 所有p都會被選到 -->
  <p>Descendant</p>
  <div>
    <p>Descendant</p>
  </div>
</div>

Child combinator (子)

使用 > 來選擇子元素，如 div > p 只會選擇第一層(子元素)而不是所有後代。

<div>
  <!-- Child 會選到 -->
  <p>Child</p>
  <div>
    <!-- 這個不是 Child -->
    <p>Descendant</p>
  </div>
</div>

Sibling combinator (兄弟)

使用 ~ 來選擇兄弟，如 p ~ span，兄弟不一定要緊鄰，只要同一層即可。

<!-- 這個不會選到 -->
<span>This is not select</span>
<p>some text</p>
<!-- 會選到這個 span -->
<span>sibling</span>
<br />
<div>something</div>
<!-- 會選到這個 span -->
<span>sibling</span>

Adjacent sibling combinator (緊鄰兄弟)

使用 + 來選擇緊鄰的兄弟， 如 p + span，就會選擇緊靠著 p 後的 span， Tailwind CSS 的 Divider 就是使用 * + * 來達成的。

Column Combinator

Column combinator 比較特殊，通常用來選擇表格的同一列，因為還在 Experimental 階段，要謹慎使用。

參考文件

MDN CSS Selectors