[TOC] #### 前言 ---- 本文詳細(xì)記錄 CSS 各種選擇器，對(duì)選擇器進(jìn)行了分類整理，若有遺漏的選擇器后續(xù)會(huì)更新上 本文僅是對(duì) CSS 所有選擇器做一個(gè)概括，詳細(xì)用法不做過(guò)多描述，比較重要的類型選擇器會(huì)另外寫文章做詳細(xì)總結(jié) #### 1. 簡(jiǎn)單選擇器 ---- ##### 通配符選擇器 使用 `*` 匹配頁(yè)面中所有標(biāo)簽，**通配符選擇器** 又稱為 **全局選擇器** ```css * {} ``` ##### 標(biāo)簽選擇器 **標(biāo)簽選擇器** 又稱為 **元素選擇器**、**類型選擇器**、**html 選擇器** ```css div {} span {} ``` ##### 類選擇器 用于找到所有該類名的標(biāo)簽，class 值可以重復(fù) ```css .box {} ``` ##### id選擇器 找到擁有該 id 值的標(biāo)簽，同一個(gè)頁(yè)面中 id 值不能重復(fù) ```css #box {} ``` ##### 群組選擇器 **群組選擇器** 又稱為 **分組選擇器**，用于選中多個(gè)選擇器，優(yōu)化冗余的 CSS 樣式代碼 ``` 選擇器1,選擇器2 {} ``` ##### 后代選擇器 **后代選擇器** 又稱為 **派生選擇器**，找到指定標(biāo)簽的所有后代標(biāo)簽 ```css 選擇器1 選擇器2 {} ``` ##### 子代選擇器 子代選擇器用于找到指定標(biāo)簽的所有直接子元素標(biāo)簽 ```css 選擇器1 > 選擇器2 {} ``` ##### 交集選擇器 交集選擇器是指標(biāo)簽選擇器和 id 或 class 選擇器配合使用。 并集選擇器的作用: 提高選擇器的權(quán)重，更加精準(zhǔn)的選擇指定標(biāo)簽 ``` 標(biāo)簽名.class值 {} 標(biāo)簽名.id值 {} ``` #### 2. 兄弟選擇器 --- ##### 相鄰兄弟選擇器 相鄰兄弟選擇器用于選中緊跟著的一個(gè)兄弟 特別注意: 字符實(shí)體不是標(biāo)簽，不影響相鄰關(guān)系 ``` 選擇器1 + 選擇器2 {} ``` ##### 通用兄弟選擇器 **通用兄弟選擇器** 又稱為 **一般兄弟選擇器**，用于選中后面所有兄弟 ``` 選擇器1 ~ 選擇器2 {} ``` 可使用下面代碼測(cè)試相鄰兄弟選擇器與通用兄弟選擇器的區(qū)別 ```html <style> /* 相鄰兄弟選擇器 */ p+p { color: red; font-size: 25px; font-weight: bold; } /* 通用兄弟選擇器 */ p~p { color: red; font-size: 25px; font-weight: bold; } </style> <main> <p>1</p> <p>2</p> <span>3</span> <p>4</p> <p>5</p> <span>6</span> </main> ``` #### 3. 屬性選擇器 ---- ##### 屬性名選擇器 以屬性名匹配元素，屬性名不能用引號(hào)引起來(lái) ```css /* 格式 */ [屬性名] {} /* 示例: 選中具有 type 屬性的標(biāo)簽 */ [type] {} ``` ##### 屬性值選擇器 選中具有指定屬性名和值的元素，屬性值可以不用引號(hào)引起來(lái)，但是如果屬性值是以數(shù)字開(kāi)頭時(shí)則必須使用引號(hào) 語(yǔ)法格式: ```css [attr=value] {} [attr="value"] {} ``` ##### 屬性值開(kāi)頭選擇器 屬性值開(kāi)頭匹配選擇器: attr 的值以 value 開(kāi)頭 ```html <style> [class^="box"] { color: red; } </style> <div class="box1">1</div> <div class="box2">2</div> <div>3</div> ``` ##### 屬性值結(jié)尾選擇器 屬性值結(jié)尾匹配選擇器: attr 的值以 value 結(jié)尾 ```css [attr$="value"] {} ``` ##### 屬性值模糊匹配選擇器 **屬性值模糊匹配選擇器** 又稱為 **稅性質(zhì)模糊匹配選擇器**，匹配 attr 屬性值包含 value 的元素 ```css [attr*="value"] {} ``` ##### 單個(gè)屬性值匹配選擇器 用于匹配多屬性中的單個(gè)屬性值，只有一個(gè)屬性值也能匹配到: attr 包含獨(dú)立的單詞 value, 必須用空格分開(kāi) ```css [attr~="value"] {} ``` 使用示例: ```html <style> [class~="box"] { color: red; } </style> <div class="box">1</div> <div class="box item1">2</div> ``` ##### 分割屬性值匹配選擇器 匹配滿足下面條件的元素: attr 的值以 value 開(kāi)頭，必須用 `-` 分開(kāi)單詞,比如 `value-*` ```css [attr|="value"] {} ``` 使用示例: ```html <style> [class|="box"] { color: red; } </style> <div class="box-abc">1</div> <div class="box-item1">2</div> ``` ##### 標(biāo)簽屬性選擇器 標(biāo)簽選擇器和屬性選擇器的結(jié)合用法 ``` 標(biāo)簽名[屬性選擇器] {} ``` 使用示例 ```css input[name] {} span[class|="box"] {} ``` #### 4. 偽類選擇器 ---- ##### 靜態(tài)鏈接偽類 靜態(tài)鏈接偽類有: link（未訪問(wèn)的狀態(tài)）、visited（訪問(wèn)后的狀態(tài)），是超鏈接特有的偽類。開(kāi)發(fā)中用的比較少 ```css a:link { color: red; } a:visited { color: blue; } ``` ##### 動(dòng)態(tài)鏈接偽類 動(dòng)態(tài)鏈接偽類: focus（獲取焦點(diǎn)）、hover（鼠標(biāo)滑過(guò)）、active（鼠標(biāo)激活，鏈接被按下） active 必須寫在 hover 的后面，否則 active 會(huì)失效 超鏈接如果有多個(gè)選擇器，需按照上面的順序設(shè)定，否則會(huì)有 css 樣式無(wú)法加載（與選擇器的優(yōu)先級(jí)有關(guān)） ```css div:hover { background: lightcoral; } input:focus { background: lightcoral; } a:active { font-weight: bold; color: blueviolet; } ``` ##### 目標(biāo)鏈接偽類 目標(biāo)鏈接偽類: target，是 CSS 3 中新增的。突出顯示被激活的錨點(diǎn)元素，也就是給被激活的錨點(diǎn)設(shè)置樣式 ```css div:target { font-size: 35px; } ``` ##### UI 元素狀態(tài)偽類 **UI 元素狀態(tài)偽類選擇器** 用于 **表單元素** | 選擇器 | 描述 | | ------------ | ------------ | | :enabled | 匹配界面中已啟用的元素，表單元素默認(rèn)就是啟用 | | :disabled | 匹配界面中被禁用的元素，已啟用的對(duì)立面 | | :checked | 匹配被選中的元素，只用于單選框和復(fù)選框 | ##### 結(jié)構(gòu)偽類選擇器 ###### child 系列 (css2) | 選擇器 | 描述 | | ------------ | ------------ | | :first-child | 父元素結(jié)構(gòu)上的第一個(gè)子元素 | | :last-child | 父元素結(jié)構(gòu)上的最后一個(gè)子元素 | | :nth-child(n) | 父元素結(jié)構(gòu)上的第 n 個(gè)子元素 | | :nth-child(-n + 3) | 父元素結(jié)構(gòu)上的前 3 個(gè)子元素 | | :nth-child(n + 5) | 從第 5 個(gè)開(kāi)始的子元素 | | :nth-child(2n + 5) | 間隔選擇，從第 5 個(gè)開(kāi)始，每隔兩個(gè) | | :nth-last-child(n) | 父元素結(jié)構(gòu)上的倒數(shù)第 n 個(gè)字元素 | | :only-child | 父元素只有一個(gè)子元素 | ###### of-type 系列 (css3) | 選擇器 | 描述 | | ------------ | ------------ | | :first-of-type | 父元素的第一個(gè)該類型的子元素 | | :last-of-type | 父元素的最后一個(gè)該類型的子元素 | | :nth-of-type(n) | 父元素的第 n 個(gè)該類型的子元素 | | :nth-last-of-type(n) | 父元素結(jié)構(gòu)上的倒數(shù)第 n 個(gè)該類型的子元素 | child 系列和 of-type 系列中 n 的取值 1\. 非零的正整數(shù): 1、2、3 2\. 英文單詞: odd(奇數(shù))、even(偶數(shù)) 3\. 公式 `an + b`: a 倍數(shù) n 計(jì)數(shù)器，從 0 開(kāi)始的整數(shù)，b 偏移量 選中第 1、4、7、10、... 個(gè)元素 ``` div:nth-child(3n+1) {} ``` ###### empty 空元素選擇器 匹配沒(méi)有子元素的元素，空元素: 標(biāo)簽中沒(méi)有內(nèi)容的元素 ```css div:empty {} ``` ##### 否定偽類選擇器 否定偽類用法: `not(選擇器) {}` 將指定選擇器排除在外，圓括號(hào)中的選擇器只能是簡(jiǎn)單選擇器 ``` div:not(.box) {} ```