你的CSS選擇器可視化備忘錄
前言
最近，在和前端小伙伴聊天中發現，有些同學對css有一種望而卻步的趕腳。究其原因，就是因為它的各種屬性繁雜多樣，屬性的用法千奇百怪。大家想做系統學習也找不到對應的方法，只是「機械式」的進行記憶。而沒有在腦海中形成對應的「畫面」。
想必大家在平時業務開發中，對某個css屬性進行查詢時，總是打開google然后輸入對應的屬性，一般都是返回MDN中相關介紹。但是，它們這種介紹都是從原理角度來分析，無法給人一種直觀的感受。
所以，既要想系統性的學習并且有一個直觀印象，最好的方式就是用圖例的方式來「可視化」記憶和總結。
而今天，我們來系統的介紹一下CSS選擇器。這塊沒啥原理可講，我們只是需要記憶即可，所以這篇文章算是給我或者大家的一篇備忘錄。以便以后能夠快速查詢。
0. 啥是CSS選擇器
CSS選擇器是用于選擇 HTML 元素并為其應用樣式的一種機制。
- 選擇器允許我們根據元素的類型、屬性、位置以及其他特征來選擇要樣式化的元素，從而實現對網頁樣式的精確控制。
以下是一些常見的 CSS 選擇器及其用途：
- 「元素選擇器（Element Selector）」：選擇指定類型的 HTML 元素。例如，p 選擇所有段落元素。
- 「類選擇器（Class Selector）」：選擇具有指定類名的元素。以點號（.）開頭，后跟類名。例如，.button 選擇所有類名為 button 的元素。
- 「ID 選擇器（ID Selector）」：選擇具有指定 ID 的元素。以井號（#）開頭，后跟 ID 名稱。例如，#header 選擇 ID 為 header 的元素。
- 「后代選擇器（Descendant Selector）」：選擇指定元素的后代元素。使用空格分隔兩個選擇器，其中
第一個選擇器表示父元素
第二個選擇器表示后代元素
例如，div p 選擇所有 <div> 元素內部的所有段落 <p> 元素。
- 「相鄰兄弟選擇器（Adjacent Sibling Selector）」：選擇緊接在另一個元素后面的元素。使用加號（+）符號連接兩個選擇器，其中
第一個選擇器表示第一個元素
第二個選擇器表示其緊鄰的兄弟元素
例如，h2 + p 選擇所有緊接在 <h2> 元素后面的 <p> 元素。
- 「通用選擇器（Universal Selector）」：選擇頁面中的「所有元素」。使用星號（*）表示。例如，* 選擇頁面中的所有元素。
除了這些基本的選擇器外，CSS 還提供了許多其他類型的選擇器，如偽類選擇器（例如 :hover、:active）、偽元素選擇器（例如 ::before、::after）、屬性選擇器（例如 [type="text"]）等，可以根據具體的需求選擇合適的選擇器來對頁面元素進行樣式化。
1. 通用選擇器 - *
CSS的通用選擇器是一個星號（*），它匹配文檔中的「任何元素」。使用通用選擇器，我們可以選擇頁面上的「所有元素」，并為它們應用相同的樣式。
例如，如果我們想為頁面上的所有元素設置相同的字體樣式，我們可以使用通用選擇器來實現。
但要注意，過度使用通用選擇器可能會導致「性能問題」，因為它會匹配頁面上的所有元素，包括嵌套元素，這可能會增加瀏覽器的渲染負擔。因此，建議在必要時謹慎使用通用選擇器。
圖片
2. 元素選擇器 - element
元素選擇器是 CSS 中最簡單的選擇器之一，它通過指定 HTML 元素的名稱來選擇元素。例如，要選擇所有段落元素 <p>，我們可以使用以下選擇器：
p {
/* CSS 樣式 */
}這將選擇頁面中的所有段落元素，并應用所指定的 CSS 樣式。
圖片
3. 類名選擇器 - .class
類選擇器用于選擇具有特定類名的 HTML 元素。類選擇器以點號（.）開頭，后跟類名。例如，如果我們有一個類名為 button 的按鈕元素，我們可以使用類選擇器來選擇它：
.button {
/* CSS 樣式 */
}這將選擇頁面中所有具有類名 button 的元素，并應用所指定的 CSS 樣式。類選擇器使我們可以為頁面中的「多個元素定義相同的樣式」，而不必重復定義。此外，一個元素可以同時具有多個類，這樣就可以輕松地將多個樣式應用于同一個元素。
圖片
4. ID 選擇器 - #id
ID 選擇器是 CSS 中用于選擇具有特定 ID 屬性的 HTML 元素的選擇器。ID 選擇器以井號（#）開頭，后跟 ID 名稱。
例如，如果我們有一個 ID 為 my-id 的標題元素，我們可以使用 ID 選擇器來選擇它：
#my-id {
/* CSS 樣式 */
}這將選擇頁面中具有 ID 名稱為 my-id 的元素，并應用所指定的 CSS 樣式。「與類選擇器不同，ID 選擇器應該是唯一的」，因為 HTML 頁面中每個元素的 ID 必須是唯一的。ID 選擇器通常用于「為特定元素應用唯一的樣式」。
圖片
5. 多選擇器 - .class.class-2
.class.class-2表示連接兩個或更多類或ID來選擇具有所有指定類/ID的元素：
圖片
這段CSS代碼的意思是選擇具有 .my-class 和 .special 兩個類的元素，并設置對應的背景色。
6. 逗號組合 - .class, .class-2
使用逗號分隔多個選擇器聲明。這樣可以輕松地「將相同的樣式應用于多個選擇器聲明」:
圖片
7. 后代選擇器 - .class .class-2
后代選擇器用于「選擇特定元素的后代元素」。后代選擇器使用「空格分隔兩個選擇器」，其中
- 第一個選擇器表示父元素
- 第二個選擇器表示后代元素
例如，如果我們想選擇所有 <div> 元素內部的所有段落 <p>，我們可以使用后代選擇器：
div p {
/* CSS 樣式 */
}這將選擇所有在 <div> 元素內部的 <p> 元素，并應用所指定的 CSS 樣式。后代選擇器允許我們更精確地定位特定元素，而不受頁面結構的限制。
圖片
8. 相鄰兄弟選擇器 - .class + .class-2
相鄰兄弟選擇器它用于選擇「緊接」在另一個元素后面的元素。相鄰兄弟選擇器使用加號（+）符號來連接兩個選擇器，其中
- 第一個選擇器表示第一個元素
- 第二個選擇器表示緊跟在其后的兄弟元素
例如，如果我們想選擇所有緊跟在 <h2> 元素后面的段落 <p> 元素，我們可以使用相鄰兄弟選擇器：
h2 + p {
/* CSS 樣式 */
}這將選擇緊接在 <h2> 元素后面的 <p> 元素，并應用所指定的 CSS 樣式。相鄰兄弟選擇器允許我們「根據元素之間的特定關系來選擇元素」，從而使得樣式的應用更加精確和有針對性。
圖片
9. 子選擇器 - .class > .class-2
子選擇器用于選擇特定元素的「直接子元素」。子選擇器使用大于號（>）符號來連接兩個選擇器，其中
- 第一個選擇器表示父元素
- 第二個選擇器表示其直接子元素
例如，如果我們想選擇所有 <ul> 元素下的直接子元素 <li>，我們可以使用子選擇器：
ul > li {
/* CSS 樣式 */
}這將選擇所有直接位于 <ul> 元素內部的 <li> 元素，并應用所指定的 CSS 樣式。
子選擇器「只會選擇指定元素的直接子元素，而不會選擇嵌套在更深層次的子元素」。這使得子選擇器非常有用，因為它可以幫助我們更精確地定位特定層次結構的元素，并應用相應的樣式。
圖片
10. 兄弟選擇器 - .class ~ .class-2
兄弟選擇器用于「選擇與指定元素具有相同父元素且位于其后面的所有兄弟元素」。一般兄弟選擇器使用波浪號（~）符號來連接兩個選擇器，其中
- 第一個選擇器表示基準元素
- 第二個選擇器表示它的兄弟元素
例如，如果我們想選擇所有與 <h2> 元素具有相同父元素且位于其后面的 <p> 元素，我們可以使用一般兄弟選擇器：
h2 ~ p {
/* CSS 樣式 */
}這將選擇所有與 <h2> 元素具有相同父元素且位于其后面的 <p> 元素，并應用所指定的 CSS 樣式。
兄弟選擇器允許我們選擇與指定元素具有相同父元素且位于其后面的所有兄弟元素，而不僅僅是直接的兄弟元素。
圖片
11. 腦殘貓頭鷹選擇器 - * + *
腦殘貓頭鷹選擇器用來描述一種特定的 CSS 模式。它涉及選擇多個元素并為它們應用共享樣式，從而在網頁的各個組件或部分中創建一致的視覺設計。
術語腦殘指的是通用選擇器（*）與相鄰兄弟選擇器（+）結合使用的情況。貓頭鷹可能指的是 CSS 選擇器的形態類似于貓頭鷹的頭部和眼睛。
以下是“腦殘貓頭鷹”選擇器模式的示例：
* + * {
margin-top: 1.5em;
}這個 CSS 規則選擇了在另一個元素之后出現的任何元素（除了容器中的第一個元素），并在頂部應用了一定的邊距，有效地使元素均勻地間隔開來。這種模式特別適用于在為「容器內的元素添加間距，但第一個元素沒有前置兄弟元素」。當然，我們也可以使用 :not(:first-child)來達到相同的效果。
圖片
12. 屬性選擇器
屬性選擇器它允許我們根據元素的屬性及其屬性值來選擇元素，并為其應用樣式。屬性選擇器使用方括號（[]）表示，內部包含屬性名和可選的屬性值。
存在性屬性選擇器
選擇具有指定屬性的元素，不論其屬性值是什么。
[data-text] {
/* CSS 樣式 */
}選擇所有具有 data-text 屬性的元素，并為其應用樣式。這個選擇器「不關心屬性的值是什么，只要有這個屬性就會被選中」
圖片
值屬性選擇器
選擇具有指定屬性和特定值的元素。
[data-text="hello"] {
/* CSS 樣式 */
}選擇所有 data-text 屬性的值為 hello 的元素，并為其應用樣式。
只有屬性值為 hello 的元素才會被選中。
部分值屬性選擇器
選擇具有指定屬性，并且屬性值包含特定值的元素。
[title*="saur"] {
/* CSS 樣式 */
}選擇所有 title 屬性值中包含 saur子字符串的元素，并為其應用樣式。
只要屬性值包含 saur，無論是在開頭、中間還是結尾，都會被選中。
圖片
起始值屬性選擇器
選擇具有指定屬性，且屬性值以特定值開頭的元素。
a[href^="https://"] {
/* CSS 樣式 */
}選擇所有 href 屬性值以 https:// 開頭的 <a> 元素，并為其應用樣式。
只有鏈接以 https:// 開頭的 <a> 元素才會被選中。
圖片
結束值屬性選擇器
選擇具有指定屬性，且屬性值以特定值結尾的元素。
[src$=".png"] {
/* CSS 樣式 */
}選擇所有 src 屬性值以 .png 結尾的元素，并為其應用樣式。
只有圖片路徑以 .png 結尾的元素才會被選中。
圖片
包含值屬性選擇器
選擇具有指定屬性，且屬性值包含特定值的元素，且值之間以空格分隔。
[class~="active"] {
/* CSS 樣式 */
}選擇所有具有包含 active 的類名的元素，并為其應用樣式。
這個選擇器將選中所有具有 active 類的元素，無論它們的類名是 active 還是 some-active-class 等。
圖片
13. link偽類選擇器
以下四個偽類用于選擇各種狀態下的link等元素。這四個偽類通常與鏈接一起使用，但是 :active 對于button也很有用，而 :hover 可以用于所有類型的元素：
- :link
選擇未訪問的link。它允許我們為用戶尚未點擊的超鏈接設置樣式。
- :visited
選擇用戶已經訪問過的link。這個偽類允許我們為以前點擊過的超鏈接應用樣式。
- :hover
當用戶的指針（例如鼠標光標）懸停在元素（通常是鏈接）上時，選擇這些元素。
- :active
選擇在它們被激活時的元素（通常是鏈接或按鈕），例如當用戶點擊它們時。
14. input相關
在前端項目中，input有很大的用處。我們來看MDN關于input的介紹。
所以，和input相關的選擇器也很多。
元素聚焦 - :focus
元素選中 - :checked
:checked 偽類選擇器用于選擇當前被選中/勾選的單選按鈕、復選框或選擇元素中的選項。
input[type='checkbox'] {
all: unset;
-webkit-appearance: none;
appearance: none;
margin: 0;
}
input[type='checkbox']:checked + label {
background: mediumseagreen;
}
input[type='checkbox']:focus + label {
box-shadow: 0 0 0 2px yellow;
}在上面的示例中，我使用 appearance: none 來移除復選框輸入框的默認樣式
元素禁用 - :disabled
:disabled 偽類匹配「禁用」的表單元素，例如button或input
元素可用 - :enabled
:enabled 偽類匹配可以交互并接收輸入的表單元素
元素驗證 - :valid
:valid 偽類用于定位具有內容符合其屬性規定要求（如 pattern、type 等）的輸入元素：
元素驗證- :invalid
:invalid 偽類用于定位內容不符合要求的輸入元素：
元素必填 - :required
:required 偽類用于定位具有 required 屬性的輸入元素，表明在提交表單之前必須填寫它們：
元素可選 - :optional
:optional 偽類用于定位沒有 required 屬性的輸入元素，表示它們不是必填項：
15. 第N個孩子
第一個孩子 - :first-child
:first-child 偽類用于定位其「父元素內的第一個子元素」：
最后一個孩子 - last-child
:last-child 偽類用于定位其父元素內的最后一個子元素：
第N個孩子 - :nth-child
:nth-child 偽類根據元素在其父元素中的位置進行選擇，允許進行各種各樣的選擇。
:nth-child 還可以讓我們按模式選擇元素：
- :nth-child(odd) 或 :nth-child(2n+1) 選擇「每個奇數位置」的子元素
- :nth-child(even) 或 :nth-child(2n) 選擇「每個偶數位置」的子元素
公式中的 n 就像一個計數器，讓我們可以在重復循環中選擇元素。
第N個孩子(倒數) - :nth-last-child
:nth-last-child 偽類類似于 :nth-child，但它是從「最后一個子元素開始向后計數」的
元素的唯一子元素 - :only-child
如果某個元素是其父元素的「唯一子元素」，則 :only-child 偽類將其作為目標元素：
16. 指定類型的第N個孩子
類型的第一個元素 - :first-of-type
:first-of-type 偽類的目標是其父級中「該類型的第一個元素」：
類型的最后一個元素 - :last-of-type
:last-of-type 偽類的目標是其父級中「該類型的最后一個元素」
類型的第N個元素 - :nth-of-type
:nth-of-type 偽類根據元素的類型和兄弟元素中的位置來匹配元素
類型的第N個元素(向后計數) - :nth-last-of-type
:nth-last-of-type 偽類根據元素的類型和兄弟元素中的位置來匹配元素，但從末尾開始計數
其類型的唯一元素 - :only-of-type
:only-of-type 偽類的目標元素是其兄弟元素中該類型的唯一元素：
17. 偽類選擇器
目標元素選擇器- .target
:target 偽類選擇具有與 URL 片段匹配的 ID 屬性的元素（例如：https://example.com/#fragment）。:target 經常用于為直接鏈接到的頁面部分設置樣式，通常「與頁面內鏈接一起使用」。
否定偽類 - .not()
:not()函數偽類允許我們定位與指定選擇器或條件不匹配的元素。它本質上是一個「過濾器」：
父選擇器 - :has()
:has()函數偽類允許在元素包含某個元素或另一個選擇器時對其進行樣式設置：
其他偽類
- :root：選擇文檔中最高級別的父元素，通常是 HTML 文檔中的 <html> 元素。用于定義 CSS 變量，這些變量將對頁面內所有元素可用。
- :is()：匹配可以是多個選擇器之一的元素，使得長選擇器列表更簡潔易讀。例如，:is(h1, h2, h3) 可以匹配這三個標題元素中的任何一個。
- :where()：類似于 :is()，但允許根據條件選擇元素，而不影響選擇器的特異性。
- :default：匹配設置為其默認選擇狀態的 UI 元素（例如單選按鈕或復選框）。
- :empty：選擇沒有子元素的元素（包括文本節點）。
- :fullscreen：選擇當前以全屏模式顯示的元素。
- :in-range：匹配值在指定范圍內的表單元素（使用 min 和 max 屬性）。
- :out-of-range：匹配值在指定范圍之外的表單元素。
- :indeterminate：選擇狀態不確定的表單元素，例如既不選中也不取消選中的復選框（通常在樹形視圖結構中看到）。
- :read-only：匹配由于 readonly 屬性而無法由用戶編輯的表單元素。
- :read-write：選擇用戶可以編輯的表單元素，意味著它們不是只讀的。
- :lang()：根據其語言屬性匹配元素。例如，:lang(en) 選擇用英語定義的元素。
18. 偽元素
第一個子偽元素 - ::before
::before 偽元素用于在元素內容之前插入內容。它可用于添加裝飾內容、圖標或其他不需要在實際 DOM 中的元素：
最后一個子偽元素 - ::after
::after 偽元素與 ::before 類似，用于在元素內容之后插入內容：
首字母偽元素- ::first-letter
::first-letter 偽元素用于設置塊級元素的「第一個字母的樣式」，允許使用首字下沉等設計元素：
首行偽元素 - ::first-line
::first-line 偽元素用于設置塊級元素第一行的樣式。這允許印刷效果可以根據包含元素的大小和字體大小動態調整：
文本輸入占位符 - ::placeholder
::placeholder 偽元素用于設置表單字段（如 <input> 和 <textarea>）的占位符文本的樣式：
樣式突出顯示框 - ::selection
::selection 偽元素用于設置元素中已突出顯示或由用戶選擇的部分的樣式。例如，當用戶單擊并拖動以選擇文本時，::selection偽元素可用于修改該選擇的背景顏色、文本顏色和其他樣式：
列表標記偽元素 - ::marker
::marker 偽元素用于設置列表項中標記框的樣式，列表項通常包含項目符號（對于無序列表）或數字/字母（對于有序列表）。
在引入 ::marker 偽元素之前，自定義這些標記通常需要解決方法，但這個偽元素給了我們更多的控制權：
