CSS 選擇器 ( CSS Selector )

CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧，透過特定的選擇器的規則，就能快速地找出某些元素，並針元素進行樣式的設定，這篇教學會引導大家認識 CSS 選擇器並開始使用 CSS 選擇器。

快速導覽：

• CSS 選擇器是什麼？
• CSS 選擇器的種類
• CSS 選擇器的命名空間
• 造成 CSS 選擇器無效的狀況

CSS 選擇器是什麼？

「CSS 選擇器」如同字面的意思，會根據特定的「規則」，例如元素名稱、類別、ID、屬性或其他特定條件，「選擇」HTML 裡的特定元素，可單獨選取一個或一次選取多個元素，選取後就能設定元素的樣式。以下方的程式碼為例，HTML 裡有兩個 h2 元素，使用 CSS 選擇器就能一次讓兩個 h2 的文字都變成紅色。

<!-- HTML 程式碼  -->
<h2>STEAM 教育學習網</h2>
<h2>OXXO.STUDIO</h2>

<!-- CSS 程式碼  -->
<style>
  h2 {color: red;}  /* 所有的 h2 都變成紅色文字 */
</style>

CSS 選擇器的種類

CSS 選擇器根據使用的規則，主要分成「通用選擇器、元素選擇器、類別與 ID 選擇器、屬性選擇器、群組選擇器、文件結構選擇器、虛擬類別選擇器和虛擬元素選擇器」。

• 通用選擇器

  「通用選擇器」表示「所有元素」，其代表符號為一個星號「*」，使用後會將樣式套用到所有的元素，通用選擇器常用在進行「CSS 初始化」的動作，以下方的 CSS 為例，所有的元素都會套用紅色文字的樣式。

  * {color: red;}
  

• 元素選擇器

  「元素選擇器」表示「 HTML 元素」，只要是常用的 HTML 元素 ( h1、h2、p、a...等 )，或是 HTML 所構成的元素 ( html、body...等 )，都可以透過元素選擇器進行選擇，以下方的 CSS 為例，h1 元素套用紅色文字，h2 元素套用藍色文字，p 元素套用綠色文字。

  • 詳細教學參考：元素選擇器 ( 標籤選擇器 )

  h1 {color: red;}
  h2 {color blue;}
  p {color: green;}
  

• ID 與 Class 選擇器

  「ID 與 Class 選擇器」表示「HTML 的 id 和 class」，ID 使用「#」開頭，class 使用「.」開頭，以下方的 CSS 為例，class 為 girl 會套用紅色文字樣式，class 為 boy 會套用藍色文字樣式，id 為 oxxo 會套用綠色文字樣式。

  • 詳細教學參考：ID 和 Class 選擇器 ( 類別選擇器 )

  .girl {color: red;}
  .boy {color blue;}
  #oxxo {color: green;}
  

• 屬性選擇器

  「屬性選擇器」表示「HTML 元素的屬性」，可以選擇「具有某些屬性的元素，或某些屬性等於特定數值的元素」，以下方的 CSS 為例，具有 class 屬性的元素會套用紅色文字樣式，具有 name 屬性等於 oxxo 的元素會套用藍色文字樣式。

  • 詳細教學參考：屬性選擇器

  .h2[class] {color: red;}
  .h2[name="oxxo"] {color blue;}
  

• 文件結構選擇器

  「結構選擇器」表示「HTML 元素上下層的結構關係」，這個選擇器可以利用一些「符號」來表示結構的關係，例如「+」表示元素的「下一個元素」，「>」表示「元素裡的下一層元素」，以下方 CSS 為例，與 h1 同層的下一個 span 元素會套用紅色文字，再下一個則保持黑色，而 h1 裡面的下一層 span 元素會套用藍色文字。

  • 詳細教學參考：文件結構選擇器

  <!-- HTML 程式碼  -->
  <h1>oxxo.studio
  <span>我是藍色</span>
  </h1>
  <span>hello world!!</span>
  <span>我是黑色</span>
  
  <!-- CSS 程式碼  -->
  <style>
    h1 + span {color: red;}    /* h1 相鄰的第一個 span 變成紅色文字 */
    h1 > span {color: blue; }  /* h1 的子元素 span 變成紅色文字 */
  </style>
  

  

• 虛擬類別選擇器 ( 偽類 )

  「虛擬類別選擇器」表示「HTML 不存在的類別、特定元素的狀態」，開頭使用一個冒號「:」，虛擬類別的本質通常都與「結構或狀態」有關，可以根據「結構」，選取特定位置的元素，或根據使用者操作時動態產生的「狀態」，選取特定狀態的元素，以下方的 CSS 為例，清單裡的「偶數項目」會是紅色文字，如果使用者滑鼠移動到文字上方，文字會變成藍色。

  詳細教學參考：

  • 虛擬類別選擇器 ( 結構位置 )
  • 虛擬類別選擇器 ( 類型位置 )
  • 虛擬類別選擇器 ( 表單輸入 )
  • 虛擬類別選擇器 ( 使用者操作行為 )
  • 虛擬類別選擇器 ( 超連結 )
  • 虛擬類別選擇器 ( 邏輯判斷 )
  • 虛擬類別選擇器 ( 其他、語系 )

  <!-- HTML 程式碼  -->
  <ul>
    <li>oxxo.studio</li>
    <li>紅色的 STEAM 教育學習網</li>
    <li>我是黑色</li>
    <li>我是紅色</li>
    <li>我又是黑色</li>
  </ul>
  
  <!-- CSS 程式碼  -->
  <style>
    li:nth-child(2n) {color: red;}  /* 偶數的 li 會變成紅色文字 */
    li:hover {color: blue;}         /* 滑鼠移動到 li 上方會是藍色文字 */
  </style>
  

  

• 虛擬元素選擇器 ( 偽元素 )

  所謂的「虛擬元素」也稱為「偽元素」，表示不存在於真實的 HTML 元素，可能是「想像的元素」或根據現有元素進行「想像分類」，而「虛擬元素選擇器」就是專門針對這些「想像元素或分類」的選擇器，開頭使用兩個冒號「::」。

  雖然虛擬元素不存在於真實的 HTML 元素，但只要 CSS 撰寫了相關的樣式，虛擬元素在網頁渲染時就會出現在 HTML 裡或將現有元素分類並套用樣式，以下方的 CSS 為例，在 h1 的前方會使用「::before」加入「123」，後方會使用「::after」加入「456」。

  • 注意 1、一個選擇器中只能包含一個虛擬元素，且必須放在選擇器的最末端。
  • 注意 2、雖然目前瀏覽器支援虛擬元素選擇器使用「一個冒號」，但仍建議使用「兩個冒號」，避免不同瀏覽器或支援度改變造成的錯誤。

  • 詳細教學參考：虛擬元素選擇器

  <!-- HTML 程式碼  -->
  <h1>oxxo.studio</h1>
  
  <!-- CSS 程式碼  -->
  <style>
    h1::before {content: "123";}
    h1::after {content: "456";}
  </style>
  

  

• 群組或組合選擇器

  「群組選擇器」表示「多個不同的選擇器，套用相同的樣式」，如果有多個選擇器要套用相同的樣式，可以利用逗號「,」分隔不同的選擇器，以下方 CSS 為例，四個選取器所選到的元素，都會套用紅色文字樣式。

  • 詳細教學參考：群組選擇器、組合選擇器

  h1, h2, a[title], p {color: red;}
  

  「組合選擇器」表示「將多個選擇器進行串聯組合」，如果有多個元素同時使用了相同的 Class 或屬性，則可以利用組合選擇器的方式進行篩選，以下方 CSS 為例，雖然兩個 ul 都有同樣的 Class 名稱，但卻可以根據選擇器的組合，套用不同的樣式，甚至運用虛擬類別和虛擬元素，做出截然不同的效果。

  <!-- HTML 程式碼  -->
  <ul class="fruit" type="a">
    <li>oxxo</li>
    <li>apple</li>
    <li>banana</li>
  </ul>
  <ul class="fruit" type="b">
    <li>orange</li>
    <li>grape</li>
    <li>papaya</li>
  </ul>
  
  <!-- CSS 程式碼  -->
  <style>
    /* class + 屬性 */
    .fruit[type="a"] {
      background: pink;
      color: red;
    }
    /* class + 屬性 + 結構 + 虛擬類別 */
    .fruit[type="a"] li:nth-child(2) {
      background: red;
      color: white;
    }
    /* class + 屬性 + 結構 + 虛擬類別 + 虛擬元素 */
    .fruit[type="b"] li:nth-child(2n-1)::marker {
      content: ">> "
    }
  </style>
  

  

CSS 選擇器的命名空間

通常在撰寫 CSS 時，所使用的命名空間通常表示「指向同一個位址的整份 HTML 文件」，只要是同一份文件裡的所有元素，都能夠透過 CSS 選擇器套用樣式，但如果在 HTML 使用了 SVG 元素，則可能會發生選擇器衝突的狀況 ( 例如 HTML 裡的 a 元素不同於 SVG 裡的 a 元素 )，然而如果使用「命名空間」，就能夠針對不同的文件類型進行區隔。

通常在撰寫 CSS 時，會採用下方的寫法：

* {font-size: 14px;}
h1 {font-size: 20px;}

上述的寫法表示 CSS 採用「整份 HTML 文件」的作用空間，也可以改成下方「包含命名空間」的完整寫法：

*|* {font-size: 14px;}    /* 這份 HTML 裡的所有元素 */
*|h1 {font-size: 20px;}   /* 這份 HTML 裡的所有 h1 */

如果要明確區隔 HTML 和 SVG 的命名空間，可以使用「@namespace」進行定義和區分，以下方的 CSS 為例，整份文件的 a 會是紅色文字，而位於 SVG 裡的 a 則會是藍色 ( 注意 HTML 裡的 SVG 有宣告指向位址 )。

<!-- HTML 程式碼  -->
<a href="#">STEAM 教育學習網</a>
<br/>
<svg width="120px" viewBox="0 0 120 50" xmlns="http://www.w3.org/2000/svg">
  <a href="#">
    <text x="0" y="20">OXXO.STUDIO</text>
  </a>
</svg>

<!-- CSS 程式碼  -->
<style>
  @namespace svg url('http://www.w3.org/2000/svg');  /* 定義命名空間 */
  a {color: red;}      /* 命名空間使用整份文件 */
  SVG|a {fill: blue;}  /* 命名空間使用 SVG */
</style>

造成 CSS 選擇器無效的狀況

雖然 CSS 的選擇器很強大，但仍然會有一些造成「選擇器無效」而無法選取元素的狀況，下方列出常見的原因：

• 名稱拼寫錯誤

  因為 CSS 選擇器使用「元素名稱、類別名稱、ID 名稱」作為選取依據，如果名稱拼寫錯誤，就會找不到對應的元素。

• 權重與順序錯誤

  元素會按照 CSS 選擇器的權重或執行的順序套用樣式，「權重越高」或「順序在後方」的優先套用，如果權重或順序錯誤，就會發生無效的狀況 ( 參考「優先順序 ( 權重 )」)。

• 使用不存在的虛擬類別或虛擬元素

  在使用「群組選擇器」時，如果群組裡出現了「不存在」或「不正確」的虛擬類別或虛擬元素，則該群組選擇器就會無效，群組裡所有的元素都不會套用樣式，以下方的 CSS 為例，因為群組裡出現了「:oxxo」奇怪虛擬類別，就造成這個選擇器失效，連同 h1、h2 都無法套用樣式，但如果該虛擬樣式前方加上「-webkit-」，則可以正常運作 ( 不過奇怪的名稱本來就無法識別，也盡量不要使用 )。

  h1, h2, p:oxxo {
    color: red;  /* 無法識別 :oxxo，選擇器無效 */
  }
  h1, h2, p:-webkit-oxxo {
    color: red;  /* 無法識別 :-webkit-oxxo，不過因為有加上 -webkit-，所以還是可以套用樣式 */
  }
  

小結

由於在 HTML 裡，必須要精準控制各個元素的樣式，因此 CSS 選擇器 ( Selector ) 就是 CSS 的精華所在，也是操控 CSS 不得不學的重要技術，俗話說「只要掌握了選擇器，就掌握了 CSS」( 自己講的 )，就請務必學好 CSS 選擇器！

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～