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