CSS 選擇器

CSS 選擇器是一種匹配 HTML 文件中元素的模式。關聯的樣式規則應用於與選擇器模式匹配的元素。

什麼是選擇器

選擇器是 CSS 最重要的方面之一，因為它們用於選擇網頁上的元素，以便對它們進行樣式設定。你可以通過各種方式定義選擇器。

通用選擇器

通用選擇器（寫為 * 星號）匹配頁面上的每個元素。如果目標元素上存在其他條件，則可以省略通用選擇器。此選擇器通常用於從元素中刪除預設邊距和填充，以便快速進行測試。

* {
    margin: 0;
    padding: 0;
}

* 選擇器內的樣式規則將應用於文件中的每個元素。

注意： 建議不要在生產環境中使用通用選擇器 *，因為此選擇器會匹配頁面上的每個元素，這會給瀏覽器帶來太多不必要的壓力。

元素型別選擇器

元素型別選擇器將文件樹中元素的每個例項與相應的元素型別名稱相匹配。

p {
    color: blue;
}

p 選擇器內的樣式規則將應用於 <p> 文件中的每個元素，並將其著色為藍色，而不管它們在文件樹中的位置如何。

Id 選擇器

id 選擇器用於定義單個或 唯一元素的樣式規則。

id 選擇器定義為雜湊符號（#）後跟 id 值。

#error {
    color: red;
}

此樣式規則將元素的文字呈現為紅色，其 id 屬性設定為 error 。

類選擇器

類選擇器可用於選擇具有 class 屬性的任何 HTML 元素。具有該類的所有元素將根據定義的規則進行格式化。

類選擇器定義為句點符號（.）後面緊跟類值。

.blue {
    color: blue;
}

上述樣式規則將文件中 class 屬性設定為的每個元素的藍色文字呈現為藍色 blue 。你可以把它變得更加特別。例如：

p.blue {
    color: blue;
}

選擇器內的樣式規則 p.blue 僅 <p> 將具有 class 屬性設定的元素的藍色文字呈現為藍色 blue ，並且對其他段落沒有影響。

後代選擇器

當你需要選擇另一個元素的後代元素時，可以使用這些選擇器。例如，如果你只想定位無序列表中包含的那些錨點，而不是定位所有錨元素。

ul.menu li a {
    text-decoration: none;
}
h1 em {
    color: green;
}

選擇器內的樣式規則 ul.menu li a 僅應用於那些 <a> 等錨元素，它們包含在具有 .menu 類的無序列表內的，並且對文件內的其他連結沒有影響。同樣，h1 em 選擇器內的樣式規則僅應用於包含內部 <h1> 標題的 <em> 元素。

子選擇器

子選擇器可用於僅選擇那些元素的直接子元素。子選擇器由兩個或多個由大於符號（即 >） 分隔的選擇器組成。例如，你可以使用這些選擇器來選擇具有多個級別的巢狀列表中的第一級列表元素。

ul > li {
    list-style: square;
}
ul > li ol {
    list-style: none;
}

選擇器內的樣式規則 ul > li 僅應用於作為 <li> 元素的直接子 <ul> 元素的元素，並且對其他列表元素沒有影響。

相鄰的兄弟選擇器

相鄰的兄弟選擇器可用於選擇兄弟元素。此選擇器的語法如下：E1 + E2，其中 E2 是選擇器的目標。

僅當 <h1> 元素和 <p> 元素在文件樹中共享同一個父元素且 <h1> 緊接在 <p> 元素之前時，下面示例中的 h1 + p 選擇器才會選擇 <p> 元素。這意味著只有在每個 <h1> 標題後緊跟的那些段落才會有相關的樣式規則。

h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}

一般兄弟選擇器

一般兄弟選擇器類似於相鄰的兄弟選擇器（E1 + E2），但它不那麼嚴格。一般的兄弟選擇器由兩個由 tilde（∼）字元分隔的簡單選擇器組成。它可以寫成：E1~E2，其中 E2 是選擇器的目標。

下面示例中的 h1 ∼ p 選擇器將選擇 <h1> 元素前面的所有 <p> 元素，其中所有元素在文件樹中共享相同的父元素。

h1 ∼ p {
    color: blue;
    font-size: 18px;
}
ul.task ∼ p {
    color: #f0f;
    text-indent: 30px;
}

有更多的選擇器，如屬性選擇器，偽類，偽元素。我們將在接下來的章節中討論這些選擇器。

分組選擇器

樣式表中的幾個選擇器通常共享相同的樣式規則宣告。你可以將它們分組為以逗號分隔的列表，以最小化樣式表中的程式碼。它還可以防止你反覆重複相同的樣式規則。

h1 {
    font-size: 36px;
    font-weight: normal;
}
h2 {
    font-size: 28px;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}

正如你在上面的示例中所看到的， font-weight: normal; 選擇器共享相同的樣式規則 h1、h2 和 h3 。因此，它可以分組為逗號分隔列表，如下所示：

h1, h2, h3 {
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}