在css中狸页，選擇器用于為樣式表選擇需要添加當(dāng)前樣式的元素哈踱。
選擇器的分類
id選擇器和類選擇器
這是用得最多的選擇器艘款，id選擇器通過#號后面跟隨id名使用，類選擇器根據(jù).號后面跟隨類名來選擇突想，這二者最大的差別在于id對應(yīng)的元素只有一個殴蹄，但類對應(yīng)的元素可能會有多個。
類型選擇器和全體選擇器（也叫通配符選擇器）
類型選擇器可以直接通過一個標(biāo)簽名來選擇元素而不需要任何符號猾担，比如我們可以這樣來選擇一個p標(biāo)簽：
p{
}
全體選擇器的用法和類選擇器一樣袭灯，我們可以將他看做是一個特殊的類選擇器，用符號*來選擇當(dāng)前所有元素绑嘹。
屬性選擇器
可以選擇擁有指定屬性的元素稽荧，可以和上面的選擇器配合使用（當(dāng)和全體選擇器配合使用的時候，符號*可以省略）工腋。
/* 擁有attr屬性的所有元素 */
[attr]{
}
/* 類名為test且擁有attr屬性的所有元素 */
.test[attr]{
}
/* id為test且擁有attr屬性的元素 */
#test[]{
}
下面羅列了屬性選擇器的七種使用形態(tài)蛤克，我們分別用這七種方式來獲取下面這個div：
<div title="hello world" lang="en-us">hello world</div>
- [attribute] 用于選取帶有指定屬性的元素。 (可以通過title屬性或者lang屬性來獲取)
[title]{
color:red;
}
[lang]{
color:red
}
- [attribute=value]用于選取帶有指定屬性和值的元素夷蚊。（可以通過title屬性或者lang屬性來獲裙辜贰）
[title="hello world"]{ /* 這個地方有空格，所以這里必須加個引號 */
color:red
}
[lang=en-us]{
color:red;
}
- [attribute~=value]用于選取屬性值中包含指定詞匯的元素惕鼓。（必須是完整的單詞筋现，單詞之間用空格隔開）
[title~=world]{ /* 這里也可以是hello，和前后沒有關(guān)系 */
color:red;
}
[lang~=en-us]{ /* en-us是一個單詞 */
color:red;
}
- [attribute|=value]用于選取帶有以指定值開頭的屬性值的元素箱歧。(必須是整個單詞矾飞，或者后面跟著連字符
-，所以可以用下面三種方式來賦值)
[lang|=en]{ /* en后面是連字符*/
color:red;
}
[title|="hello world"]{
color:red;
}
[lang|=en-us]{
color:red;
}
- [attribute^=value]匹配屬性值以指定值開頭的每個元素呀邢。(不要求整個單詞洒沦，只要開頭能匹配上)
[title^=h]{
color:red
}
[lang^=e]{
color:red;
}
- [attribute$=value]匹配屬性值以指定值結(jié)尾的每個元素。(不要求整個單詞价淌，只要結(jié)尾能匹配上)
[title$=d]{
color:red
}
[lang$=s]{
color:red;
}
- [attribute=value*]匹配屬性值中包含指定值的每個元素申眼。（適用范圍比上面兩種更廣瞒津，對字母的位置沒有限制，不要求整個單詞括尸，單獨(dú)匹配一個符號時需要加引號）
[title*=' ']{
color:red;
}
[lang*='-']{
color:red;
}
[lang*='-u']{
color:red;
}
偽類選擇器
以冒號開頭的選擇器巷蚪，有普通型和函數(shù)型兩種，它可以用來添加一些特殊效果濒翻。從功能上屁柏，我們可以把偽類分為以下四類來看。
樹結(jié)構(gòu)偽類選擇器
- :root偽類有送，用于選擇根元素淌喻，在HTML中，事實上等同于直接用html標(biāo)簽來選擇雀摘，但是他的優(yōu)先級要高于直接用html標(biāo)簽裸删。
- :empty偽類，用于查找沒有子節(jié)點的元素届宠。
- :only-chid 用于選擇唯一一個子元素
- :first-child :last-child 分別表示第一個和最后一個子元素
- :nth-child(n) :nth-last-child(n)兩個函數(shù)式的偽類烁落，區(qū)別是一個是從前往后數(shù)的第n個，另一個是從后往前數(shù)的第n個豌注，這里的n可以傳入一個數(shù)字或者是一個關(guān)鍵詞或者是一個表達(dá)式伤塌。（數(shù)字的情況這里不做舉例，n可以支持兩個關(guān)鍵詞
odd和even轧铁，分別代表匹配第奇數(shù)個和第偶數(shù)個每聪。他也可以支持傳入一個表達(dá)式，比如傳入2n+1來獲取第奇數(shù)個） - :nth-of-type :nth-last-of-type :first-of-type :last-of-type :only-of-type用法上和上面的一致齿风，但是在計算子元素的時候药薯，只會計算這一類元素，忽略其他類型元素救斑，這個在一定程度上會比上面的更加有用童本。
鏈接與行為偽類選擇器
這是非常常用的一類偽類選擇器，這里舉幾個比較常用的例子：
- :link 表示未被訪問過的鏈接
- :visited 表示已經(jīng)被訪問過的鏈接
- :hover 表示鼠標(biāo)懸停的元素
- :active 正在被激活的元素脸候，比如鼠標(biāo)點擊button穷娱，還沒有放開的情況
- :focus 聚焦的元素，比如輸入框
- :checked 選中的表單元素
- :disabled 被禁用的表單元素
- :target 在url中鏈接到的元素
邏輯偽類選擇器
:not 排除not中的條件
/* 類名不是 `.fancy` 的 <p> 元素 */
p:not(.fancy) {
color: green;
}
/* 非 <p> 元素 */
body :not(p) {
text-decoration: underline;
}
/* 既不是 <div> 也不是 <span> 的元素 */
body :not(div):not(span) {
font-weight: bold;
}
/* 類名不是 `.crazy` 或 `.fancy` 的元素 */
/* 注意运沦，此語法尚未獲廣泛支持泵额。 */
body :not(.crazy, .fancy) {
font-family: sans-serif;
}
其他偽類
還有一些比較不常用的選擇器，如::lang等携添，這里不做贅述嫁盲。
點擊這里可以看到所有的偽類。
選擇器優(yōu)先級
簡單理解一下選擇器的優(yōu)先級烈掠，由高到低分別為：
!important > 內(nèi)聯(lián)樣式（10000）> ID選擇器（0100） > 類選擇器羞秤，屬性選擇器缸托，偽類選擇器（0010） > 元素選擇器，關(guān)系選擇器锥腻，偽元素選擇器（0001） > 全體選擇器（0000）
選擇器的組合
在日益復(fù)雜的前端界面開發(fā)中嗦董，僅僅是靠著上面的簡單選擇器很容易導(dǎo)致css污染的情況發(fā)生母谎，選擇器的組合使用尤為重要瘦黑。
我們先來看一下，在css編寫的過程中奇唤，可能出現(xiàn)的特殊符號：
- 無連接符號(一定要注意有沒有空格)
.a.b{ /* 需要同時滿足具有a和b兩個class */
}
- 空格（后代）
.a .b{ /* 選中class為a的節(jié)點下的class為b的節(jié)點幸斥，b可以為a的子節(jié)點的子節(jié)點 */
}
-
>（子代）
.a>.b{ /* 選中class為a的節(jié)點下的class為b的子節(jié)點，b必須為a的子節(jié)點 */
}
-
~（后繼）
.a~.b{ /* class為a和b的元素處于同一個父節(jié)點下咬扇，且b元素在a元素后面 */
}
-
+（直接后繼）
.a+.b{ /* class為a和b的元素處于同一個父節(jié)點下甲葬，且b元素是a元素后面的第一個元素 */
}
-
||（列選擇器，用于表格）
.a || td {
}
-
,（邏輯或）
.a,.b{ /* 只要class為a或者b */
}
偽元素
偽元素之所以被稱之為是偽元素懈贺，因為他們在html中沒有真正對應(yīng)的元素经窖，但是他們的表現(xiàn)行為卻和真正的頁面元素一樣，他們非常的好用梭灿，可以讓我們的開發(fā)更加的簡單画侣。
這里我們主要來介紹兩種最為常用的偽元素::before和::after，用于分別在元素的前面和后面生成一個原本并不存在的元素堡妒，需要注意的是配乱，這兩個偽元素要起作用，要給他們的css規(guī)則中指定一個content的屬性：
.a::before{
content:'';
}
值得注意的是皮迟，這里的content還支持一個counter函數(shù)搬泥，我們可以這樣給一個列表每個元素前都增加一個序號：
<div class="test">
<div></div>
<div></div>
<div></div>
</div>
.test>div{
counter-increment: countName;
}
.test>div::before{
content: counter(countName) ". ";
}
我們可以在這里查看所有的偽元素。
