在網頁設計中，選擇器（selector）係用來決定 CSS 樣式規則適用於哪些 HTML 元素的關鍵部分。CSS 提供了一個強大的選擇器系統，允許開發者以不同的方式匹配 HTML 元素，從而能夠對其進行風格化處理。以下是關於 CSS 選擇器的詳細指南：

一. 基本選擇器

1. 標籤選擇器 (Element Selector):

• 使用 HTML 標籤名稱來選取所有具有該標籤的元素。

• 格式: `element_name {property: value;}`

• 範例: `p {color: blue; font-size: 20px;}`

2. 類別選擇器 (Class Selector):

• 在 HTML 元素上使用 class 屬性指定一個或多個類別。

• 格式: `.class_name {property: value;}`

• 範例: `
  

  Important Heading

  `

• `.important {font-weight: bold; color: red;}`

3. ID 選擇器 (ID Selector):

• 為單獨的一個 HTML 元素賦予唯一的 ID 值。

• 格式: `#id_value {property: value;}`

• 範例: `
  Unique Content

  `

• `#unique-content {background-color: yellow; padding: 20px;}`

二. 複合選擇器

4. 羣組選擇器 (Grouping Selectors):

• 將多個選擇器結合起來形成一個羣組，使它們共享同一行或塊內的樣式設定。

• 格式: `selector1, selector2, selectorN {property: value;}`

• 範例: `h1, h2, p {margin: 0; padding: 1em;}`

5. 並集選擇器 (Combinator):

• 透過逗號 (`,`) 分隔符號連接兩個選擇器，表示同時匹配這兩種元素。

• 格式: `selector1, selector2 {property: value;}`

• 範例: `h1 + p {margin-top: 0;}`

6. 子選擇器 (Descendant Combinator):

• 使用空格分隔符號連接父級選擇器和子級選擇器，表示子代元素應當位於所指定的父級元素內部。

• 格式: `ancestor descendant {property: value;}`

• 範例: `li a {display: block; width: 100%;}`

7. 後裔選擇器 (Child Combinator):

• 使用 > 運算符連接父級選擇器和子級選擇器，表示直接子代應當匹配所指定的條件。

• 格式: `parent > child {property: value;}`

• 範例: `ul > li {list-style: none;}`

8. adjacent sibling combinator:

• 使用加號 (+) 連接兩個選擇器，表示緊隨前一個選擇器的同胞兄弟應當匹配所指定的條件。

• 格式: `first-child + second-child {property: value;}`

• 範例: `h1 + p {text-indent: 2em;}`

9. 一般兄弟節點選擇器 (General Sibling Combinator):

• 使用波浪號 (~) 連接兩個選擇器，表示任何跟隨著第一個選擇器的同胞兄弟都應該匹配所指定的條件。

• 格式: `first ~ siblings {property: value;}`

• 範例: `h1 ~ p {text-align: justify;}`

三. 高階選擇器

10. 屬性選擇器 (Attribute Selector):

• 根據元素上的特定屬性的存在或不存在的條件來匹配元素。

• 格式: `[attribute] [attribute~=value] [attribute|=value] [attribute^=value] [attribute$=value] [attribute*=value]`

• 範例: `a[href$=”pdf”] {border: solid thin #ccc;}`

11. 僞類選擇器 (Pseudo-classes and Pseudo-elements):

• 用於向特定的HTML元素狀態添加樣式，或者創建一個不在文檔樹中的虛擬元素。

• 格式: `pseudo-class or pseudo-element {property: value;}`

• 範例: `:link {color: green;} :visited {color: purple;} ::before {content: “>”; display: inline-block;}`

12. 媒體查詢 (Media Queries):

• 根據設備類型、寬度、高度、分辨率或其他特性來應用不同的樣式表或部分樣式規則。

• 格式: `@media not|only mediatype and (media feature){…styles…}`

• 範例: `@media screen and (max-width: 600px) {body {font-size: 16px;}}`

總而言之，CSS 的選擇器提供了非常靈活的機制，讓我們可以輕易地控制網頁的不同部份的樣貌，無論是基於元素的名稱、位置、特徵還是使用者介面的不同狀態。透過正確的使用這些選擇器，我們可以建立出既美觀又符合可用性原則的網站。