>[danger]?Css選擇器和選擇器優先級，Css連接器有哪些？如何影響選擇器優先級?  >[danger]Css中的連接器有哪些？ CSS 連接器（也稱為選擇器組合符號）是用于組合兩個或多個 CSS 選擇器的符號，以便選擇特定的 HTML 元素。常見的 CSS 連接器有以下幾種： 1. 空格選擇器（Descendant Selector）：用空格分隔兩個選擇器，選中第一個選擇器所匹配的元素下所有滿足第二個選擇器的后代元素。 ```css /* 選中 .container 下所有的 p 元素 */ .container p { /* 樣式 */ } ``` 2. 相鄰同胞選擇器（Adjacent Sibling Selector）：使用 `+` 符號分隔兩個選擇器，選中緊接在第一個選擇器所匹配的元素后面的第一個滿足第二個選擇器的兄弟元素。 ```css /* 選中 h1 元素后面緊跟著的 p 元素 */ h1 + p { /* 樣式 */ } ``` 3. 通用同胞選擇器（General Sibling Selector）：使用 `~` 符號分隔兩個選擇器，選中所有緊接在第一個選擇器所匹配的元素后面的滿足第二個選擇器的兄弟元素。 ```css /* 選中 .container 下所有緊跟著 h1 元素后面的 p 元素 */ .container h1 ~ p { /* 樣式 */ } ``` 4. 子元素選擇器（Child Selector）：使用 `>` 符號分隔兩個選擇器，選中第一個選擇器所匹配的元素的子元素中所有滿足第二個選擇器的元素。 ```css /* 選中 .container 下所有直接子元素中的 p 元素 */ .container > p { /* 樣式 */ } ``` >[danger]Css中如何計算選擇器優先級? CSS 選擇器的優先級是根據選擇器的特定性（Specificity）來計算的。特定性是一個四元組 `[a, b, c, d]`，其中： - `a` 表示行內樣式的數量； - `b` 表示 ID 選擇器的數量； - `c` 表示類選擇器、屬性選擇器和偽類選擇器的數量； - `d` 表示元素選擇器和偽元素選擇器的數量。 優先級的計算規則如下： 1. 如果存在行內樣式，則特定性為 `[1, 0, 0, 0]`。 2. 否則，對于每個選擇器，計算其特定性并相加，得出總的特定性值。 3. 如果多個選擇器的特定性值相同，則后面的選擇器優先級高。 4. 如果兩個選擇器的特定性值不同，則優先級高的選擇器具有更高的優先級。 例如，以下選擇器的優先級從高到低依次為： ```css /* 特定性為 [0, 1, 1, 1] */ #header .nav li a:hover /* 特定性為 [0, 1, 2, 0] */ #header .nav li /* 特定性為 [0, 0, 3, 0] */ .nav-item.active /* 特定性為 [0, 0, 2, 1] */ a[href="#"] /* 特定性為 [0, 0, 0, 1] */ p:first-of-type ``` 總的來說，選擇器的特定性和優先級都是很重要的概念，在編寫 CSS 樣式時需要考慮到它們以避免產生樣式污染和覆蓋等問題。