css 選擇器機制

選擇器的組合

在 css 規則中，選擇器部分就是一個選擇器列表。 1. 選擇器列表是由逗號分隔的複雜選擇器序列 2. 複雜選擇器是由空格、大於號、波浪線等符號連線的複合選擇器。 3. 複合選擇器則是連寫的簡單選擇器組合。

不同連線方式的優先順序

1. 第一優先順序
   • 無連線符號
2. 第二優先順序
   • "空格"
   • "~"
   • ">"
   • "+"
   • "||"
3. 第三優先順序
   • ","

複雜選擇器的連線符號

• 空格： 後代
• > 字典
• ~ 後繼節點，和當前節點具有同一個父元素，並出現在它之後。
• + 直接後繼節點
• || 列選擇器，表示選中對應列中符合條件的單元格。

空格和子代選擇器使用場景

常用於元件化的場景，當元件是獨立開發時，給元件的最外層容器元素設定一個特別的 class 命名，生成 css 規則則全部使用後代或者子代選擇器，可以有效避免 css 規則的命名汙染問題。

逗號 使用場景

表示“或”的關係，在有兩條內容一樣的 css 規則時使用，以簡化程式碼。

選擇器的優先順序

css 規則用一個三元組 (a,b,c) 來構成一個複雜選擇器的優先順序

• id 選擇器的數目為 a
• 偽類和 class 選擇器的數目為 b
• 偽元素和標籤選擇器數目為 c
• *不影響優先順序

計算優先順序

base是一個足夠大的正整數 t

specificity = base * base * a + base * b + c
複製程式碼

優先順序規則

1. 行內屬性優先順序永遠高於 css 規則
2. !important相當於一個新的優先順序，且高於行內屬性
3. 同一優先順序遵循“後面覆蓋前面”的原則。

使用建議

1. 建議“根據 id 選單個元素”
2. "class 和 class 的組合選 成組元素"
3. “tag 元素確定頁面風格”
4. 不要搞出過於複雜的選擇器

偽元素

相容性達到可用的偽元素

• ::first-line表示元素的第一行
• ::first-letter 第一個字母
• ::before
• ::after

::first-line和::first-letter

• ::first-line必須出現在最內層的塊級元素內。
• ::first-letter位置在所有標籤之內

CSS 標準要求上述兩個偽元素實現的 css 屬性

::before 和::after

這兩個元素是真正的無中生有，造出一個元素。，必須制定content屬性才能生效。還能夠支援content為counter.

• ::before 表示在元素內容之前插入一個虛擬的元素
• ::after表示 在元素內容之後插入一個虛擬元素

支援的 css 屬性

::before和::after中支援所有的 css 屬性。

用途

可以用作裝飾性的元素，使用純粹的 css 程式碼新增進去