- CSS選擇器分類：
1）簡(jiǎn)單選擇器：針對(duì)元素特征進(jìn)行選擇，具體包括如下幾種：
????a）類型選擇器，如 p {...}
????b）全體選擇器，如 * {...}
????c）id選擇器，如 #idName {...}
????d）class選擇器，如 .className {...}
????e）屬性選擇器，如 [attribute = value]
????其中 ~= 和 |= 要求value必須是單個(gè)單獨(dú)完整的單詞，|=也支持使用"-"分隔，
????*= 、^=、$= 可以是拼接的單詞，只要包含value值即可
// 選擇帶有target屬性的所有元素
[target] {...}
// 選擇 target="_blank" 的所有元素。
[target=_blank] {...}
// 選擇 title 屬性包含單詞 "flower" 的所有元素。
[title~=flower] {...}
// 選擇其 src 屬性中包含 "abc" 子串的每個(gè) <a> 元素。
a[src*="abc"] {...}
// 選擇 lang 屬性值以 "en" 開頭的所有元素。
[lang|=en] {...}
// 選擇其 src 屬性值以 "https" 開頭的每個(gè) <a> 元素。
a[src^="https"] {...}
// 選擇其 src 屬性以 ".pdf" 結(jié)尾的所有 <a> 元素。
a[src$=".pdf"] {...}
以 ~= 和 *= 為例，效果如下：
image.png
image.png
????f）偽類選擇器，根據(jù)功能的不同介紹如下三種偽類選擇器：
????????● 樹結(jié)構(gòu)關(guān)系偽類選擇器：
// 樹的根元素
:root
// 沒有子節(jié)點(diǎn)的元素，包括文本節(jié)點(diǎn)。
:empty
// 選擇父元素的第n個(gè)子元素
:nth-child(n)
// 選擇父元素的第n個(gè)子元素，從最后一個(gè)子元素開始計(jì)數(shù)
:nth-last-child(n)
// 選擇父元素的唯一個(gè)子元素
:only-child
// 選擇第一個(gè)或者最后一個(gè)子元素
:first-child
:last-child
// type系列同理，如:first-of-type、:nth-of-type(n)
樹結(jié)構(gòu)關(guān)系偽類選擇器效果如下圖所示：
image.png
????????● 鏈接與行為偽類選擇器：
// 選擇所有未被訪問的鏈接。
a:link
// 選擇所有已被訪問的鏈接。
a:visited
// 選擇活動(dòng)鏈接。
a:active
// 選擇鼠標(biāo)指針位于其上的鏈接。
a:hover
// 選擇獲得焦點(diǎn)的 input 元素。
input:focus
// 選擇當(dāng)前活動(dòng)的 #news 元素。
#news:target
????????● 邏輯偽類選擇器：
// 選擇非 <p> 元素的每個(gè)元素。
:not(p)
image.png
2）復(fù)合選擇器：連續(xù)寫在一起的簡(jiǎn)單選擇器的組合，表示且的關(guān)系。
// 選中class名為className的p元素
p.className
3）復(fù)雜選擇器：使用"空格"、">"、"~"、"+"、"||"符號(hào)鏈接的復(fù)合選擇器，根據(jù)父元素或者前序元素檢查單個(gè)元素；
// "空格"：選中空格前的元素的后代節(jié)點(diǎn)中符合空格后的規(guī)則的元素
div #bbb {
background: red;
}
image.png
// ">" ：選中子代元素，與"空格"的區(qū)別是空格既可以選擇子代也可以選擇子代的子代，而">"只能是子元素
div > .aaa {
background: red;
}
image.png
image.png
// "~"：選中所有符合條件的后繼節(jié)點(diǎn)，后繼節(jié)點(diǎn)跟當(dāng)前節(jié)點(diǎn)具有相同的父元素
p#first ~ p{
background: red;
}
image.png
// "+"：直接后繼，即當(dāng)前節(jié)點(diǎn)的nextSibling，如果存在，只選中一個(gè)元素
image.png
// "||"：列選擇器，選中列中符合條件的單元格
4）選擇器列表：用逗號(hào)分隔的復(fù)雜選擇器列表，表示或的關(guān)系。
5）選擇器優(yōu)先級(jí)：
????第一優(yōu)先級(jí)： 無連接符號(hào)
????第二優(yōu)先級(jí)： "空格"、"~"、"+"、">"、"||"
????第三優(yōu)先級(jí)：","
優(yōu)先級(jí)三元組(a,b,c)
其中id選擇器數(shù)據(jù)為a，偽類選擇器和class選擇器數(shù)目為b，偽元素選擇器和標(biāo)簽選擇器為c，"*"不影響優(yōu)先級(jí)。優(yōu)先級(jí)計(jì)算公式如下所示，其中base白哦是一個(gè)足夠大的數(shù)字。
specificity = base * base * a + base * b + c
6）偽元素，其中:before和:after表示從無到有創(chuàng)建一個(gè)新的元素，他們中的content不能缺少，即使沒有內(nèi)容也要設(shè)置成""，這兩個(gè)偽元素非常方便用來生成裝飾性元素。
// 選擇每個(gè) <p> 元素的首字母。
p::first-letter
// 選擇每個(gè) <p> 元素的首行。
p::first-line
// 在每個(gè) <p> 元素的內(nèi)容之前插入內(nèi)容。
p::before
// 在每個(gè) <p> 元素的內(nèi)容之后插入內(nèi)容。
p::after
image.png
