CSS 選擇器（Selector）

CSS 選擇器

CSS 選擇器（Selector）用來選擇 HTML 元素，以應用相應的樣式規則。選擇器是 CSS 語法的核心部分，它們決定了樣式規則將應用於哪些元素。根據不同的需求，我們可以使用各種類型的選擇器來匹配特定的元素。

常見的 CSS 選擇器類型

1. 元素選擇器（Type Selector）

• 選擇特定的 HTML 標籤。
• 語法：直接使用 HTML 標籤名稱。
• 範例：

   h1 {
       color: blue;
   }
   p {
       font-size: 16px;
   }

• 上述範例中，h1 選擇器會選中所有的 <h1> 標籤，將其文字顏色設為藍色；p 選擇器則會將所有 <p> 標籤的字體大小設為16像素。

2. 類別選擇器（Class Selector）

• 選擇具有指定類別名稱的元素。
• 語法：使用「.類別名稱」。
• 範例：

   .highlight {
       background-color: yellow;
   }

   <p class="highlight">這段文字的背景色是黃色。</p>

• 類別選擇器 .highlight 選擇了所有帶有 highlight 類別的元素，並將其背景色設為黃色。

3. ID 選擇器（ID Selector）

• 選擇具有指定 ID 的元素。ID 是唯一的，因此一個網頁中每個 ID 只能出現一次。
• 語法：使用「#ID名稱」。
• 範例：

   #header {
       text-align: center;
       padding: 20px;
   }

   <div id="header">這是頁首</div>

• ID 選擇器 #header 選擇了 ID 為 header 的元素，並將其文字居中，並設置內距為20像素。

4. 群組選擇器（Group Selector）

• 同時為多個選擇器設置相同的樣式。
• 語法：使用逗號分隔多個選擇器。
• 範例：

   h1, h2, p {
       color: #333;
   }

• 上述範例中，h1、h2 和 p 元素將共用相同的字體顏色。

5. 通用選擇器（Universal Selector）

• 選擇所有元素。
• 語法：使用星號（*）。
• 範例：

   * {
       margin: 0;
       padding: 0;
   }

• 通用選擇器 * 將把所有元素的外距和內距設置為零。

6. 後代選擇器（Descendant Selector）

• 選擇某個元素內的所有指定後代元素。
• 語法：父元素 子元素（以空格分隔）。
• 範例：

   div p {
       color: red;
   }

   <div>
       <p>這段文字會變成紅色。</p>
       <span>這個不會受影響。</span>
   </div>

• 後代選擇器 div p 將所有在 div 元素內的 p 元素的文字顏色設為紅色。

7. 子元素選擇器（Child Selector）

• 選擇某元素的直接子元素。
• 語法：父元素 > 子元素。
• 範例：

   ul > li {
       color: green;
   }

   <ul>
       <li>直接子元素</li>
       <li>這也是直接子元素</li>
   </ul>

• 子元素選擇器 ul > li 只會選擇 ul 的直接子元素 li，將它們的字體顏色設為綠色。

8. 相鄰兄弟選擇器（Adjacent Sibling Selector）

• 選擇緊接在某元素之後的兄弟元素。
• 語法：前元素 + 後元素。
• 範例：

   h1 + p {
       margin-top: 0;
   }

   <h1>標題</h1>
   <p>這段文字會受影響。</p>

• 相鄰兄弟選擇器 h1 + p 只會選擇緊接在 h1 之後的 p 元素。

9. 通用兄弟選擇器（General Sibling Selector）

• 選擇所有在某元素之後的兄弟元素。
• 語法：前元素 ~ 後元素。
• 範例：

   h1 ~ p {
       color: gray;
   }

   <h1>標題</h1>
   <p>這段文字會受影響。</p>
   <p>這段文字也會受影響。</p>

• 通用兄弟選擇器 h1 ~ p 將選擇所有位於 h1 之後的 p 元素。

10. 屬性選擇器（Attribute Selector）

- 選擇具有特定屬性的元素。
- 語法：`[屬性]` 或 `[屬性="值"]`。
- 範例：

```css
input[type="text"] {
    border: 1px solid #333;
}
```

```html
<input type="text" />
<input type="password" />
```
- 屬性選擇器 `input[type="text"]` 將選擇所有 `type` 屬性為 `text` 的 `input` 元素，並設置其邊框樣式。

小結

CSS 選擇器是應用樣式的關鍵工具，通過靈活使用不同的選擇器，可以精確地選中需要設計的元素，從而實現多樣化的設計效果。掌握這些選擇器可以提高網頁設計的效率和可維護性。