1. 選擇器分類
簡單選擇器(Simple selectors):通過元素類型侈咕、class 或 id 匹配一個或多個元素耀销。
屬性選擇器(Attribute selectors):通過 屬性 / 屬性值 匹配一個或多個元素铲汪。
偽類(Pseudo-classes):匹配處于確定狀態(tài)的一個或多個元素,比如被鼠標(biāo)指針懸停的元素狰住,或當(dāng)前被選中或未選中的復(fù)選框催植,或元素是DOM樹中一父節(jié)點的第一個子節(jié)點。
偽元素(Pseudo-elements):匹配處于相關(guān)的確定位置的一個或多個元素伦忠,例如每個段落的第一個字稿辙,或者某個元素之前生成的內(nèi)容。
組合器(Combinators):這里不僅僅是選擇器本身赋咽,還有以有效的方式組合兩個或更多的選擇器用于非常特定的選擇的方法芥备。例如萌壳,你可以只選擇divs的直系子節(jié)點的段落日月,或者直接跟在headings后面的段落爱咬。
多用選擇器(Multiple selectors):這些也不是單獨的選擇器;這個思路是將以逗號分隔開的多個選擇器放在一個CSS規(guī)則下面精拟, 以將一組聲明應(yīng)用于由這些選擇器選擇的所有元素蜂绎。
2. 簡單選擇器
類型選擇器(又名元素選擇器): 選擇器名和指定的HTML元素名的不區(qū)分大小寫的匹配。
元素名 {屬性名:屬性值;}
類選擇器: 由一個點“.”以及類后面的類名組成怪瓶。
.類名 {屬性名:屬性值;}
ID 選擇器: 由哈希/磅符號 (#)組成洗贰,后面是給定元素的ID名稱( ID 名稱具有唯一性)。
#ID名 {屬性名:屬性值;}
通用選擇器: (*)星號许布,表示選擇頁面所有元素绎晃。
* {屬性名:屬性值;}
3. 屬性選擇器
屬性選擇器是一種特殊類型的選擇器箕昭,它根據(jù)元素的 屬性和屬性值來匹配元素。
通用語法: [屬性名:屬性值]
分類: 存在和值屬性選擇器 和 子串值屬性選擇器泌霍。
3.1 存在和值(Presence and value)屬性選擇器
這些屬性選擇器嘗試匹配精確的屬性值:
[attr]:該選擇器選擇包含 attr 屬性的所有元素述召,不論 attr 的值為何螟左。
[attr=val]:該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素议泵。
[attr~=val]:該選擇器僅選擇 attr 屬性的值(以空格間隔出多個值)中有包含 val 值的所有元素唆铐,比如位于被空格分隔的多個類(class)中的一個類遍愿。
3.2 子串值(Substring value)屬性選擇器
這種情況的屬性選擇器也被稱為“偽正則選擇器”沼填,因為它們提供類似 regular expression 的靈活匹配方式(但請注意,這些選擇器并不是真正的正則表達(dá)式):
[attr|=val] : 選擇attr屬性的值是 val 或值以 val- 開頭的元素(-用來處理語言編碼)岩饼。
[attr^=val] : 選擇attr屬性的值以val開頭(包括 val)的元素籍茧。
[attr$=val] : 選擇attr屬性的值以val結(jié)尾(包括 val)的元素却邓。
[attr*=val] : 選擇attr屬性的值中包含字符串 val 的元素。
4. 偽選擇器
偽選擇器 —— 這些不選擇實際元素,而是元素的某些部分简十,或僅在某些上下文中的元素檬某。它們有兩種主要類型 - 偽類和偽元素。
4.1 偽類(Pseudo-class)
CSS偽類是添加到選擇器的關(guān)鍵字螟蝙,指定要選擇的元素的特殊狀態(tài)恢恼。
語法:selector:pseudo-class { property: value; }
例如:a:visited {} a:hover {} a:active {} a:focus {}
4.2 偽元素
pseudo classes (偽類)一樣, 偽元素添加到選擇器胰默,但不是描述特殊狀態(tài)场斑,它們允許您為元素的某些部分設(shè)置樣式。
語法 :selector::pseudo-element { property: value; }
所有偽元素:
::after 元素的最后一個子元素
::before 元素的第一個子元素
::first-letter (塊級元素)第一行的第一個字母
::first-line (塊級元素)的第一行
::selection 用于文檔中被用戶高亮的部分(比如使用鼠標(biāo)或其他選擇設(shè)備選中的部分)牵署。
5. 組合器和多個選擇器
5.1 組合器
5.2 同一規(guī)則集上的多個選擇器
語法 selector1,selector2 {property:value;}