在 css 中，選擇器是選取需設(shè)置樣式的元素的模式。今天就來看看 CSS 中的高級選擇器以及實用技巧！
一、基礎(chǔ)選擇器
在說高級選擇器之前，先來回顧一下CSS中的基礎(chǔ)選擇器。
1、元素選擇器
最常見的 CSS 選擇器就是元素選擇器。選擇器通常將是某個 html 元素：
h1 {
color: red;
font-size: 50px;
}
在 W3C 標準中，元素選擇器又稱為類型選擇器（type selector）。類型選擇器匹配文檔語言元素類型的名稱。類型選擇器匹配文檔樹中該元素類型的每一個實例。
2、ID 選擇器
id 選擇器用來指定具有ID的元素的樣式。ID 選擇器前面有一個 # 號 - 也稱為棋盤號或井號。
#my_id {
color: red;
font-size: 50px;
}
需要注意，在一個 HTML 文檔中，ID 選擇器會使用一次，而且僅一次。并且 ID 選擇器不能結(jié)合使用，因為 ID 屬性不允許有以空格分隔的詞列表。
3、類選擇器
CSS類選擇器會根據(jù)元素的類屬性中的內(nèi)容匹配元素。類屬性被定義為一個以空格分隔的列表項，在這組類名中，必須有一項與類選擇器中的類名完全匹配，此條樣式聲明才會生效。類選擇器也是我們最常用的選擇器之一。
.my_class {
color: red;
font-size: 50px;
}
二、通配選擇器
在CSS中，一個星號(*)就是一個通配選擇器，之所以如此命名，是因為它普遍適用于所有元素，可以匹配任意類型的HTML元素。那通配符選擇器有啥實際應(yīng)用呢？其會常用于全局樣式重置，比如 CSS 盒子模型重置：
*,
*::before,
*::after {
box-sizing: border-box;
}
這意味著我們希望所有元素在盒子模型計算中包括padding和border，而不是將這些寬度添加到任何定義的尺寸。例如，在以下規(guī)則中，.box寬度將是200px，而不是200px + 20px：
.box {
width: 200px;
padding: 10px;
}
三、屬性選擇器
CSS 屬性選擇器通過已經(jīng)存在的屬性名或?qū)傩灾灯ヅ湓亍＿@是一個非常強大的選擇器，但是通常沒有充分發(fā)揮其潛力。CSS 屬性選擇器可以獲得類似于正則表達式的匹配結(jié)果。這對于修改 BEM 風格的系統(tǒng)或其他使用相關(guān)類名但可能不是單個通用類名的框架非常有用。來看一個例子：
[class*="component_"]
這個選擇器將選擇所有具有包含 component_ 字符串的類的元素。
可以通過在關(guān)閉屬性選擇器之前包含 i 來確保匹配不區(qū)分大小寫：
[class*="component_" i]
當然我們也可以不指定屬性值，而是簡單的檢查它是否存在，例如下面的選擇器會選擇具有任何class值 的所有 a 標簽：
a[class]
屬性選擇器可以用來執(zhí)行一些基本的可訪問性檢查，例如：
img:not([alt]) {
outline: 2px solid red;
}
這將為所有不包含 alt 屬性的圖像添加輪廓。
四、子代選擇器
當使用 > 選擇符分隔兩個元素時，它只會匹配那些作為第一個元素的直接后代(子元素)的第二元素。子組合選擇器是唯一處理元素級別的選擇器，并且可以組合以選擇嵌套元素。
? 選擇 article > p。
<article>
<p>Hello world</p>
</article>
