CSS選擇器——cssSelector定位方式詳解
阿新 • • 發佈：2019-02-02
基本css選擇器
關係選擇器
聯合選擇器與反選擇器
偽元素和偽類選擇器
CSS選擇器中，最常用的選擇器如下：
| 選擇器 | 描述 | 舉例 |
| * | 通配選擇器，選擇所有的元素 | * |
| <type> | 選擇特定型別的元素，支援基本HTML標籤 | h1 |
| .<class> | 選擇具有特定class的元素。 | .class1 |
| <type>.<class> | 特定型別和特定class的交集。（直接將多個選擇器連著一起表示交集） | h1.class1 |
| #<id> | 選擇具有特定id屬性值的元素 | #id1 |
屬性選擇器
除了最基本的核心選擇器外，還有可以基於屬性的屬性選擇器：
| 選擇器 | 描述 | 舉例 |
| [attr] | 選取定義attr屬性的元素，即使該屬性沒有值 | [placeholder] |
| [attr="val"] | 選取attr屬性等於val的元素 | [placeholder="請輸入關鍵詞"] |
| [attr^="val"] | 選取attr屬性開頭為val的元素 | [placeholder^="請輸入"] |
| [attr$="val"] | 選取attr屬性結尾為val的元素 | [placeholder$="關鍵詞"] |
| [attr*="val"] | 選取attr屬性包含val的元素 | [placeholder*="入關"] |
| [attr~="val"] | 選取attr屬性包含多個空格分隔的屬性，其中一個等於val的元素 | [placeholder~="關鍵詞"] |
| [attr|="val"] | 選取attr屬性等於val的元素或第一個屬性值等於val的元素 | [placeholder|="關鍵詞"] |
關係選擇器
有一些選擇器是基於層級之間的關係，這類選擇器稱之為關係選擇器。
| 選擇器 | 描述 | 舉例 |
| <selector> <selector> | 第二個選擇器為第一個選擇器的後代元素，選取第二個選擇器匹配結果 | .class1 h1 |
| <selector> > <selector> | 第二個選擇器為第一個選擇器的直接子元素，選取第二個選擇器匹配結果 | .class1 > * |
| <selector> + <selector> | 第二個選擇器為第一個選擇器的兄弟元素，選取第二個選擇器的下一兄弟元素 | .class1 + [lang] |
| <selector> ~ <selector> | 第二個選擇器為第一個選擇器的兄弟元素，選取第二個選擇器的全部兄弟元素 | .class1 ~ [lang] |
聯合選擇器與反選擇器
利用聯合選擇器與反選擇器，可以實現與和或的關係。
| 選擇器 | 描述 | 舉例 |
| <selector>,<selector> | 屬於第一個選擇器的元素或者是屬於第二個選擇器的元素 | h1, h2 |
| :not(<selector>) | 不屬於選擇器選中的元素 | :not(html) |
偽元素和偽類選擇器
CSS選擇器支援了偽元素和偽類選擇器。
| :active | 滑鼠點選的元素 |
| :checked | 處於選中狀態的元素 |
| :default | 選取預設值的元素 |
| :disabled | 選取處於禁用狀態的元素 |
| :empty | 選取沒有任何內容的元素 |
| :enabled | 選取處於可用狀態的元素 |
| :first-child | 選取元素的第一個子元素 |
| :first-letter | 選取文字的第一個字母 |
| :first-line | 選取文字的第一行 |
| :focus | 選取得到焦點的元素 |
| :hover | 選取滑鼠懸停的元素 |
| :in-range | 選取範圍之內的元素 |
| :out-of-range | 選取範圍之外的元素 |
| :lang(<language>) | 選取lang屬性為language的元素 |
| :last-child | 選取元素的最後一個子元素 |
| :link | 選取連結元素 |
| :nth-child(n) | 選取第n個子元素 |
| :nth-last-child(n) | 選取倒數第n個子元素 |
| :nth-of-type(n) | 選取同類型的第n個元素 |
| :nth-last-of-type(n) | 選擇同類型的倒數第n個元素 |
| :only-chid | 選擇元素中唯一的子元素 |
| :only-of-type | 選取元素中唯一與指定型別相同的元素 |
| :required | 選取具有require屬性的元素 |
| :optional | 選取沒有require屬性的元素 |
| :root | 選取文件的根元素 |
| :target | 選取URL中錨點引用的元素 |
| :valid | 選取表單中驗證valid元素 |
| :invalid | 選取表單中驗證未通過驗證的元素 |
| :visited | 選取用於已經訪問過的連結元素。 |