[TOC] ## **介紹** 選擇器是由 CSS 最先引入的一個機制（但隨著 document.querySelector 等 API 的加入，選擇器已經不僅僅是 CSS 的一部分了） **選擇器的基本意義是：根據一些特征，選中元素的一批元素** 把選擇器的結構分一下類，那么由簡單到復雜可以分成： * 簡單選擇器：針對某一特征判斷是否選中元素 * 復合選擇器：連續寫在一起的簡單選擇器，針對元素自身特征選擇單個元素 * 復雜選擇器：由 空格, >, ~, +, || 等符號連接的復合選擇器，根據父元素或者前序元素檢查單個元素 * 選擇器列表：由逗號分隔的復雜選擇器，表示「或」的關系  *偽類選擇器：一系列由 CSS 規定好的選擇器，它們以冒號開頭，偽類有普通型和函數型* - 簡單選擇器列表：[前人栽樹，后人乘涼，傳送門](https://docs.itellboy.wang/css/selector.html) - 偽元素選擇器（目前兼容性良好的幾個） - ::first-line：選中元素的第一行 - ::first-letter：選中元素的第一個字母 - ::before：在元素內容之前插入一個虛擬的元素（須指定 content 屬性才會生效） - ::after：在元素內容之后插入一個虛擬的元素（須指定 content 屬性才會生效） --- ## **解析方式** 選擇器的解析方式是從右往左解析的 ```css .content .item-view img { width: clac(100vw - 20px); } // 瀏覽器在解析時，先會找到 img 標簽的元素，然后繼續向上查找驗證 ``` ## **選擇器權重** - **!important**：最高 - **標簽樣式**：第二高 - **id 選擇器**：+100 - **class、屬性、偽類**：+10 - **類型、偽元素**：+1 - **全體選擇器**：+0 - 相同權重按順序覆蓋