關鍵要點 CSS 選擇器是 CSS 規則集中至關重要的部分，它們允許根據 HTML 元素的類型、屬性或在 HTML 文檔中的位置來選擇和設置特定 HTML 元素的樣式。 CSS 選擇器有多種類型，包括通用選擇器、元素類型選擇器、ID 選擇器、類選擇器、子選擇器、通用兄弟選擇器、相鄰兄弟選擇器、屬性選擇器、偽類選擇器和偽元素選擇器。 使用星號聲明的通用 CSS 選擇器會選擇頁面上的所有元素，而元素類型選擇器則會定位名稱相同的 HTML 元素。 使用井號聲明的 ID CSS 選擇器會定位具有匹配 ID 屬性的任何 HTML 元素，而使用點聲明的類選擇器則會匹配所有具有匹配類屬性的元素。 偽類和偽元素選擇器是特殊類型的選擇器，允許為元素的特定部分或處於特定狀態（例如懸停或作為其父元素的第一個子元素）的元素設置樣式。 什麼是 CSS 選擇器？ CSS 選擇器是 CSS 規則集的一部分，它允許您按類型、屬性或在 HTML 文檔中的位置選擇要設置樣式的元素。讓我們來看一下所有可用的不同類型的選擇器，並簡要描述一下每個選擇器。這是一個您可以參考的簡潔的 CSS 選擇器速查表。 CSS 選擇器的類型 通用選擇器：每個元素 元素類型選擇器：特定類型的元素，例如 。 ID 選擇器：按其 id 屬性選擇元素，例如 #myElement。 類選擇器：按其 class 屬性選擇元素(s)，例如 .myClass。 子選擇器：元素的直接後代（子元素）。 通用兄弟選擇器：HTML 中的通用兄弟元素。 相鄰兄弟選擇器：HTML 中的直接兄弟元素。 屬性選擇器：基於 HTML 屬性的存在和/或值，例如 [type="text"]。 偽類選擇器：基於偽類的存在，例如 :hover。 偽元素選擇器：用於偽元素，例如 ::before 元素。 通用 CSS 選擇器 通用選擇器就像通配符一樣，選擇頁面上的所有元素。每個 HTML 頁面都是基於放置在 HTML 標記內的內容構建的。每一組標記都代表頁面上的一個元素。請查看以下 CSS 示例，該示例使用了通用選擇器： * { color: green; font-size: 20px; line-height: 25px; } 花括號內的三行代碼（顏色、字體大小和行高）將應用於 HTML 頁面上的所有元素。如這裡所示，通用選擇器是使用星號聲明的。您還可以將通用選擇器與其他選擇器結合使用。 元素類型 CSS 選擇器 也簡稱為“類型選擇器”，此選擇器必須匹配名稱相同的 HTML 元素。因此，nav 選擇器將匹配所有 HTML nav 元素，而 選擇器將匹配所有 HTML 無序列表或 元素。以下示例使用元素類型選擇器來匹配所有 元素： * { color: green; font-size: 20px; line-height: 25px; } 為了說明這一點，這是一個我們將應用上述 CSS 的 HTML 部分： ul { list-style: none; border: solid 1px #ccc; } 構成此頁面部分的主要元素有三個：兩個 元素和一個 。 CSS 將僅應用於兩個 元素，而不應用於 。如果我們將元素類型選擇器更改為使用 而不是 ，則樣式將應用於 ，而不應用於兩個 元素。另請注意，樣式不會應用於 或 元素內的元素。也就是說，某些樣式可能會被這些內部元素繼承。 ID CSS 選擇器 ID 選擇器使用哈希或井號 (#) 在字符字符串之前聲明。字符字符串由開發人員定義。此選擇器匹配任何 HTML 元素，該元素的 ID 屬性的值與選擇器的值相同，但減去哈希符號。這是一個示例： Fish Apples Cheese Example paragraph text. Water Juice Maple Syrup 此 CSS 使用 ID 選擇器來匹配 HTML 元素，例如： #container { width: 960px; margin: 0 auto; } 在這種情況下，這是一個 元素並不重要——它可以是任何類型的 HTML 元素。只要它具有值為 container 的 ID 屬性，樣式就會應用。網頁上的 ID 元素應該是唯一的。也就是說，任何給定頁面上只有一個元素的 ID 為 container。這使得 ID 選擇器相當不靈活，因為 ID 選擇器規則集中使用的樣式每個頁面只能使用一次。如果頁面上有多個元素具有相同的 ID，則樣式仍然會應用，但從技術角度來看，此類頁面的 HTML 無效，因此您需要避免這樣做。除了不靈活的問題外，ID 選擇器還存在特異性非常高的問題。 類 CSS 選擇器 類選擇器是所有 CSS 選擇器中最有用的。它用一個點聲明，後面跟著一個或多個字符的字符串。與 ID 選擇器一樣，此字符字符串由開發人員定義。類選擇器還匹配頁面上所有將它們的類屬性設置為與類相同的值的元素，減去點。請看以下規則集： 這些樣式將應用於以下 HTML 元素： * { color: green; font-size: 20px; line-height: 25px; } 相同的樣式也將應用於任何其他具有值為 box 的類屬性的 HTML 元素。在單個頁面上有多個具有相同類屬性的元素是有益的，因為它允許您重用樣式並避免不必要的重複。除此之外，類選擇器的特異性非常低——稍後將詳細介紹。類選擇器成為寶貴盟友的另一個原因是 HTML 允許將多個類添加到單個元素。這是通過使用空格分隔 HTML 類屬性中的類來完成的。這是一個示例： ul { list-style: none; border: solid 1px #ccc; } (以下內容因篇幅限制，將簡略概括，保留關鍵信息和代碼示例。完整的解釋請參考原文。) 後代組合器、子組合器、通用兄弟組合器、相鄰兄弟組合器、屬性選擇器、偽類選擇器、偽元素選擇器 這些選擇器組合方式和使用方法在原文中都有詳細解釋，這裡只保留關鍵信息： 後代組合器: 使用空格，選擇父元素內部的所有後代元素。 子組合器: 使用 >，只選擇父元素的直接子元素。 通用兄弟組合器: 使用 ~，選擇所有後續兄弟元素。 相鄰兄弟組合器: 使用 ，只選擇緊跟其後的兄弟元素。 屬性選擇器: 使用 []，根據屬性選擇元素。例如 [type="text"]。 偽類選擇器: 使用 :，根據元素狀態選擇元素。例如 :hover, :first-child。 偽元素選擇器: 使用 ::，選擇元素的特定部分。例如 ::before, ::after。 常見問題解答 (FAQ) 關於 CSS 選擇器的常見問題，原文中提供了詳細解答，這裡不再贅述。 通過以上簡要概括，希望能幫助您理解 CSS 選擇器的核心概念和使用方法。 如需更詳細的解釋，請參考原文。
