昨天我們介紹了 HTML 與 CSS 的基本結構與對應關係，今天則要進入核心主題 CSS 的「選擇器（Selector）」。

什麼是選擇器？「選取正確的物件」其實是任何軟體操作的關鍵第一步，當然在 CSS 也不例外。就像在 Photoshop 裡，我們得先選中正確的圖層才能繪圖或變形；在 CSS 中，也必須先精準定位目標元素，才能順利調整它的外觀樣式。

CSS 提供了非常豐富的選擇器語法，讓開發者能精準定位 HTML 元素並套用樣式規則。接下來，我們將逐一介紹各種選擇器的語法、使用範例與應用方式。(ﾟ 3ﾟ)～♪

基本選擇器 (Basic Selectors)

基本選擇器是通過 HTML 元素的特徵來選取元素，這些特徵包括標籤名稱、類別屬性、ID 屬性或其他標籤屬性。

1. 通用選擇器 (Universal Selector)

   • 使用「星號（*）」表示「通用選擇器」，可以選取頁面中的所有元素。

   • 通常用於重置樣式或全域設定，但會影響效能，建議謹慎使用。

     /* 所有元素：設定 1px 的實線黑色邊框 */
     * {   
         border: 1px solid #000;
     }
     

2. 元素選擇器 / 標籤選擇器 (Element Selector)

   • 使用「HTML 標籤名稱」作為選擇器，選取所有該類型的元素。

   • 適合設定基本樣式，常與其他選擇器組合使用，以縮小選取範圍，避免樣式套用過於廣泛。

     /* 所有 p 段落元素：設定文字為藍色 */
     p { 
         color: blue; 
     }
     /* 所有 h1 標題元素：設定文字大小為 24px */
     h1 { 
         font-size: 24px; 
     }
     /* 所有 div 容器元素：設定外部間距為 10px */
     div { 
         margin: 10px; 
     }     
     

3. 類別選擇器 (Class Selector)

   • 使用「點（.）」表示「類別選擇器」，可以根據 HTML 元素的 class 屬性值來選取元素。

   • 如果要設定多個選擇條件，可以直接連寫多個類別選擇器，或是於前面加上元素選擇器。

   • 可以準確選取到特定元素，又能在多個元素上重複使用，因此是 CSS 開發中最實用且最常使用的選擇器。

     /* class="btn-primary" 設定文字為白色 */
     .btn-primary { 
         color: white; 
     } 
     /* class="btn btn-primary" 設定文字為白色 */
     .btn.btn-primary { 
         color: white; 
     }
     /* <p class="text"> */
     p.text { 
         color: #333; 
     }             
     

4. ID 選擇器 (ID Selector)

   • 使用「井字號（#）」建立「ID 選擇器」，可以根據 HTML 元素的 id 屬性值來選取元素。

   • id 屬性在 HTML 中具有「唯一性」，每個頁面中只能出現一次，因此較難重複利用。此外，ID 選擇器的優先權較高，容易覆蓋掉其他選擇器的樣式，因此建議減少使用。

     /* id="header" 設定寬度為 100% */
     #header { 
         width: 100%; 
     }
     /* id="main-content" 設定內部間距為 20px */
     #main-content { 
         padding: 20px; 
     }
     /* <div id="footer"> 設定背景顏色為 #333  */
     div#footer { 
         background: #333; 
     }
     

5. 屬性選擇器 (Attribute Selector)

   • 使用「方括號 [ ]」建立「屬性選擇器」，可以根據 HTML 元素的屬性來選取元素。

   • HTML 標籤中除了 class、id 之外，還有其他額外的屬性，CSS 選擇器也可以利用這些屬性來進行選取。

     /* 具有 disabled 屬性 */
     [disabled] { 
     	opacity: 0.5; 
     }
     
     /* 屬性 type 為 text */
     [type="text"] { 
         padding: 5px; 
     }
     
     /* <input type="email"> */ 
     inupt[type="email"] { 
         background: #f0f8ff; 
     }
     

組合選擇器 (Combinators)

組合選擇器能夠利用 HTML 元素之間的層級關係和位置關係，以更精確地選取目標元素。

1. 群組選擇器 (Group of selectors)

   • 使用「逗號（,）」分隔不同的選擇器，可同時套用相同的樣式規則，到多個選擇器上。

   • 範例：如果有很多元素，要使用一樣的樣式就可以這樣寫！像是 h1, h2, h3 我都要吃一樣的字體，就不用寫三次！方便！(ゝ∀･)

     h1, h2, h3 { 
       font-family: Inter;  /* 所有 h1, h2, h3 標題元素，設定相同字體 */
     }
     
     .btn, .button { 
       padding: 10px;       /* 所有 class 為 btn 與 button，設定相同內部間距 */
     }
     

2. 後代選擇器 (Descendant Combinator)

   • 使用「空格」作為選擇器分隔符號，可以選取某元素內部的「所有子元素或後代元素」，無論層級深淺。

   • 範例 1：.container 裡面的 p 全部都會被選中。

     .container p {
       color: red;
       font-weight: bold;
     }
     

     <div class="container">
       <p>段落1（會被選中）</p>
       <div>
         <p>段落2（會被選中）</p>
         <span>
           <p>段落3（會被選中）</p>
         </span>
       </div>
     </div>
     

   • 範例 2 ：.container 裡面的 div 裡面的 p 全部都會被選中。段落 1 的 p 沒有被選中，是因為他雖然有在 .container 裡面，但沒有在包一層 div，所以不會選到他（段落 1）。

     .container div p {
       color: red;
       font-weight: bold;
     }
     

     <div class="container">
       <p>段落1（不會被選中）</p>
       <div>
         <p>段落2（會被選中）</p>
         <span>
           <p>段落3（會被選中）</p>
         </span>
       </div>
     </div>
     

3. 子元素選擇器 (Child Combinator)

   • 使用「大於號（>）」作為選擇器分隔符號，可以選取某元素內部的「下一層子元素」，不包含更深層的後代元素。

   • 範例：只會選到 .container 裡面一層結構的 p（段落 1、段落 2），再進去一層就不會被選到了（段落 3）。

     .parent > p {
       background-color: yellow;
       padding: 10px;
     }
     

     <div class="parent">
       <p>段落1（會被選中）</p>
       <p>段落2（會被選中）</p>
       <div>
         <p>段落3（不會被選中）</p>
       </div>
       <span>文字內容</span>
     </div>
     

4. 同層相鄰選擇器 / 相鄰兄弟選擇器 (Adjacent Sibling Combinator)

   • 使用「加號（+）」作為選擇器分隔符號，可以選取某元素後面的「相鄰同層元素」，僅選取相鄰的一個同層元素，不包含後續的其他同層元素。

   • 範例：只會選到 .title 相鄰下一個的 p，如果 .title 相鄰的不是 p，那就都不會選到任何東西喔！

     .title + p {
       font-size: 18px;
       margin-top: 0;
       color: blue;
     }
     

     <div class="content">
       <h2 class="title">標題</h2>
       <p>段落1（會被選中）</p>
       <p>段落2（不會被選中）</p>
       <span>其他內容</span>
       <p>段落3（不會被選中）</p>
     </div>
     

5. 同層全體選擇器 / 通用兄弟選擇器 (General Sibling Combinator)

   • 使用「波浪號（~）」作為選擇器分隔符號，可以選取某元素後面的「所有同層元素」，僅選取後面的同層元素，不包括前面的同層元素。

   • 範例：先找到 .trigger 之後，後面的 p 就全部選起來！這個符號就滿直覺的，由 A～B 的概念！

     .trigger ~ p {
       border-left: 3px solid green;
       padding-left: 15px;
       background-color: #f0f8f0;
     }
     

     <div class="section">
       <p>段落1（不會被選中）</p>
       <h3 class="trigger">觸發標題</h3>
       <p>段落2（會被選中）</p>
       <div>其他內容</div>
       <p>段落3（會被選中）</p>
       <span>文字</span>
       <p>段落4（會被選中）</p>
     </div>
     

總結

掌握 CSS 選擇器是精準控制網頁樣式的基石，以上是我們今天我們介紹的兩種選擇器：

• 基本選擇器：包含通用選擇器（*）、標籤選擇器（p）、類別選擇器（.class）、ID 選擇器（#id）與屬性選擇器（[attr]），適合用來針對單一元素的特徵快速定義樣式。
• 組合選擇器：包含群組（,）、後代（空格）、子元素（>）、相鄰兄弟（+）與通用兄弟（~），善用 DOM 節點間的層級與前後關係，大幅提升定位目標的靈活度。

明天我們將繼續解鎖更進階的技巧，包含動態互動必備的「偽類」如 :hover，以及擴展結構樣式的「偽元素（Pseudo-elements）」，敬請期待！(・∀・)♪