圖解 60 個 CSS 選擇器，一網打盡！
CSS 選擇器用于選擇 HTML 元素并將樣式應用于它們。使用這些選擇器，可以定義特定條件下應用哪些樣式。除了普通的選擇器外，還有偽類和偽元素，用于選擇具有特定狀態或特定部分的元素，并將樣式應用于它們。本文將通過圖文并茂的方式展示這些選擇器的使用方法！
選擇器
通用選擇器
通用選擇器使用 * 來選擇全部元素。
圖片
元素選擇器
同于選擇指定 HTML 元素。
圖片
類選擇器
選擇具有指定類名的所有元素。
圖片
ID選擇器
選擇具有指定ID的元素。
圖片
組合選擇器
連接兩個或多個類名或 ID，以選擇具有所有指定類名/ID的元素。
圖片
多重選擇器
使用逗號將多個選擇器聲明分開，這樣可以很容易地將相同的樣式應用于多個選擇器聲明。
圖片
后代選擇器
后代選擇器表示選擇某個元素的所有后代元素，即位于該元素內部的所有子孫元素。在使用后代選擇器時，在兩個選擇器之間加上一個空格，表示前一個選擇器所選中的元素中包含的后代元素。
圖片
相鄰選擇器
相鄰選擇器用于選擇緊接在另一個元素后面的直接相鄰兄弟元素的選擇器，使用加號（+）作為組合符號，將兩個選擇器連接起來。它選擇的是位于第一個選擇器后緊鄰的同級元素。
圖片
子選擇器
子選擇器用于選擇某個元素的直接子元素，使用大于號（>）作為組合符號，將兩個選擇器連接起來。它選擇的是父級元素下的直接子元素，即元素樹結構中的一級關系。
圖片
通用兄弟選擇器
通用兄弟選擇器使用波浪號（即通用兄弟組合符）來選擇在第一個選擇器之前的所有元素，而不要求它們是第一個選擇器的直接兄弟元素。
圖片
貓頭鷹選擇器
貓頭鷹選擇器用于選擇所有具有前置兄弟元素的元素，用來在一個容器內的元素之間添加間距，但不包括第一個元素，因為第一個元素沒有前置兄弟元素。
圖片
屬性選擇器
屬性選擇器用于選擇具有特定屬性的元素。
- 使用[attribute]來選擇所有具有 attribute 屬性的元素：
圖片
- 使用 [attribute=value] 來選擇具有指定屬性及屬性值的元素：
圖片
- 使用 [attribute~=value] 來選擇具有指定屬性，并且該屬性的多個值中包含給定值的元素：
圖片
- 使用 [attribute*=value] 來選擇具有指定屬性，并且該屬性的值中包含特定部分值的元素。
圖片
- 使用 [attribute^=value] 來選擇具有指定屬性，并且該屬性的值以給定值開頭的元素。
圖片
- 使用 [attribute$=value] 來選擇具有指定屬性，并且該屬性的值以給定值結尾的元素。
圖片
偽類
鏈接偽類選擇器
這 4 個偽類用于選擇鏈接處于不同狀態的元素。它們最常與鏈接一起使用，但是 :active 也適用于按鈕，而 :hover 可以用于各種元素：
- :link：選取未被訪問過的鏈接，用于為用戶尚未點擊的超鏈接設置樣式。
- :visited：選取已經被用戶訪問過的鏈接，用于為用戶之前點擊過的超鏈接設置樣式。
- :hover：當用戶指針（例如鼠標光標）懸停在某些元素（通常是鏈接）上時，選取這些元素。
- :active：在元素（通常是鏈接或按鈕）被激活時，例如用戶點擊它們的瞬間，選取這些元素。
這 4 個偽類可用于提高用戶交互性，例如增加鏈接的可見度，使其更加顯著突出，從而改善用戶體驗。
圖片
:focus 偽類
:focus 偽類用于選擇當前獲得焦點的元素。當用戶與網頁上的表單元素進行交互時，可以通過點擊或鍵盤導航，使某個特定的輸入框處于焦點狀態。這意味著用戶的輸入將直接應用到該輸入框上。
圖片
:checked 偽類
:checked 偽類用于選擇當前被選中或選擇的單選按鈕、復選框或 select 元素的選項。
圖片
:disabled 偽類
:disabled 偽類用于匹配被禁用的表單元素，例如按鈕或文本輸入框。
圖片
:enabled 偽類
:enabled 偽類用于匹配可以交互和接收輸入的表單元素。
圖片
:valid 偽類
:valid 偽類用于選擇具有與其屬性（如 pattern、type 等）所指定要求相匹配的內容的輸入元素。
當 input 元素的內容符合其屬性所指定的要求時，可以使用 :valid 偽類選擇它們。
圖片
:invalid 偽類
:invalid 偽類用于選擇具有內容不符合要求的輸入元素。
當input元素的內容不符合其要求時，可以使用 :invalid 偽類來選擇它們。
圖片
:required 偽類
:required 偽類用于選擇具有 required 屬性的輸入元素，該屬性表示在提交表單之前必須填寫它們。
當 input 元素具有 required 屬性時，可以使用 :required 偽類選擇它們。
:optional 偽類
:optional 偽類用于選擇沒有 required 屬性的輸入元素，這意味著它們不是必填項。
當input 元素沒有 required 屬性時，可以使用 :optional 偽類選擇它們。
圖片
:first-child 偽類
:first-child 偽類用于選擇父元素中的第一個子元素。
圖片
:last-child 偽類
:last-child 偽類用于選擇父元素中的最后一個子元素。
圖片
:nth-child 偽類
:nth-child 偽類根據元素在父元素中的位置進行選擇，允許進行各種選擇。:nth-child 還可以自定義模式選擇元素：
- :nth-child(odd) 或 :nth-child(2n+1) 選擇每個奇數位置的子元素
- :nth-child(even) 或 :nth-child(2n) 選擇每個偶數位置的子元素
公式中的 n 就像一個計數器，可以按重復周期選擇元素。例如，:nth-child(3n) 將選擇每三個元素。
圖片
:nth-last-child 偽類
:nth-last-child 偽類與 :nth-child 類似，但是從最后一個子元素向后計數。
:only-child 偽類
當需要選擇在其父級元素中唯一的一個子元素時，可以使用 :only-child 偽類。
圖片
:first-of-type 偽類
:first-of-type 偽類選擇在其父元素中的特定類型的元素中的第一個元素。
圖片
:last-of-type 偽類
:last-of-type 偽類選擇在其父元素中的特定類型的元素中的最后一個元素。
圖片
:nth-of-type 偽類
當需要根據元素在兄弟元素中的類型和位置選擇元素時，可以使用 :nth-of-type 偽類。
圖片
:nth-last-of-type 偽類
:當需要根據元素在兄弟元素中的類型和位置選擇元素，并且從末尾開始計數時，可以使用 :nth-last-of-type 偽類。
圖片
:only-of-type 偽類
當需要選擇在其兄弟元素中為特定類型的元素僅有一個的元素時，可以使用 :only-of-type 偽類。
圖片
:target 偽類
:target 用于選擇具有與 URL 片段匹配的 ID 屬性的元素。URL 片段是指 URL 中的 # 符號后面的部分。當從頁面中的鏈接點擊跳轉到帶有特定片段的 URL 時，:target 偽類將會被應用于與片段匹配的對應元素上。這樣可以利用 :target 來為被直接鏈接到的頁面部分設置不同的樣式，從而提供視覺上的反饋和突出顯示。
圖片
:not() 偽類
使用 :not() 偽類可以選擇不符合指定選擇器或條件的元素。這在需要排除某些特定元素時非常有用。
圖片
has() 偽類
使用 :has() 偽類可以選擇包含某個特定元素或選擇器的父級元素，并為其應用樣式。
圖片
其他偽類
除了上面提到的偽類，CSS中還包含以下偽類：
- :root：選擇文檔中最高級別的父元素，通常是HTML文檔中的 <html> 元素。可用于定義對所有頁面元素可用的CSS變量。
- :is()：匹配可以是多個選擇器之一的元素，使得長的選擇器列表更加簡短和易讀。例如，:is(h1, h2, h3) 會匹配這三個標題元素之一。
- :where()：與 :is() 類似，但允許根據條件選擇元素，而不影響選擇器的特異性。
- :default：匹配設置為默認選擇狀態的用戶界面元素（如單選按鈕或復選框）。
- :empty：選擇沒有子元素（包括文本節點）的元素。
- :fullscreen：選擇當前以全屏模式顯示的元素。
- :in-range：匹配值在指定范圍內的表單元素（使用 min 和 max 屬性指定范圍）。
- :out-of-range：匹配值在指定范圍之外的表單元素。
- :indeterminate：選擇狀態不確定的表單元素，例如既未選中也未取消選中的復選框（在樹狀結構中經常見到）。
- :read-only：匹配由于 readonly 屬性而不可編輯的表單元素。
- :read-write：選擇可由用戶編輯的表單元素，意味著它們不是只讀的。
- :lang()：根據元素的語言屬性進行匹配。例如，:lang(en) 選擇使用英語定義的元素。
偽元素
::before 偽元素
::before 偽元素用于在元素內容之前插入內容。它可以用于添加裝飾性內容、圖標或其他不需要出現在實際 DOM 中的元素。
圖片
::after 偽元素
::after 偽元素與 ::before 偽元素類似，用于在元素的內容之后插入內容。
圖片
::first-letter 偽元素
::first-letter 偽元素用于選擇并修改塊級元素的第一個字母，從而應用特定的樣式。這個偽元素只能選擇每個塊級元素的第一個字母，并且僅在有文本內容的時候生效。
圖片
::first-line 偽元素
::first-line 偽元素用于選擇并修改塊級元素的第一行，從而應用特定的樣式。這個偽元素只能選擇每個塊級元素的第一行，并且僅在有文本內容的時候生效。
圖片
::placeholder 偽元素
::placeholder 偽元素用于選擇并修改表單字段的占位符文本，從而應用特定的樣式。占位符文本是在用戶未輸入任何內容時顯示的默認文本。
圖片
::selection 偽元素
::selection 偽元素用于選擇并修改用戶所選文本的樣式。可以應用于包含文本內容的任何元素，如段落、標題、按鈕等。
圖片
::marker 偽元素
::marker 偽元素用于為列表項中的標記符設置樣式，這些標記符通常包含無序列表的項目符號或有序列表的數字/字母。
圖片
其他偽元素
除了上述偽元素之外，CSS 還提供了以下偽元素：
- ::file-selector-button：用于選擇文件的按鈕元素的偽元素。它可以用來樣式化文件上傳控件中的選擇按鈕。
- ::cue：用于樣式化媒體元素（如音頻或視頻）中的字幕或注釋的偽元素。可以用來設置字幕的樣式，比如字體、顏色等。
- ::part()：用于自定義 Web 組件的內部部件的偽元素。它可以針對組件的具體部分應用樣式，并通過組件的 shadow DOM 提供的 Custom Elements API 進行訪問。
- ::slotted()：用于樣式化插槽內容的偽元素。插槽是一種在 Web 組件中用于插入內容的機制，::slotted() 可以應用樣式到被插入的內容，以實現更精確的樣式控制。
