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