一、CSS選擇器
CSS中選擇器是一種模式，用于選擇需要添加樣式的元素。
選擇器的基本結(jié)構(gòu)如下
x {
background: red;
}
其中，x是選擇器可以是類，ID，元素類型等等，下面會(huì)具體探討，后面的花括號(hào)為聲明塊，對(duì)元素樣式的聲明都包含在其中，每一個(gè)屬性聲明用分號(hào);隔開(kāi)。
二、CSS選擇器類別
CSS中選擇器主要分為以下幾種：
- 標(biāo)簽選擇器
- ID選擇器
- 類選擇器
- 通用選擇器
- 組合選擇器
- 繼承選擇器
- 偽類選擇器
- 屬性選擇器
基本的選擇器此處不做贅述，只寫(xiě)幾個(gè)特殊的。
2.1 后代選擇器
.class_name div {
background: red;
}
這里為類名為.class_name的元素包含的所有后代div元素設(shè)定樣式，且只針對(duì)其后代不影響同級(jí)或更高級(jí)以及其后代div元素。如果我們將下面代碼制定這樣的CSS樣式的話，會(huì)發(fā)現(xiàn)這里面的子級(jí)div和孫級(jí)div都會(huì)被設(shè)置為紅色背景。
<div class=".class_name">
<div class="">
<div class="">
</div>
</div>
</div>
有時(shí)候并不需要將所有的后代元素都設(shè)置同一個(gè)樣式，比如上面這段，我只想將子級(jí)div設(shè)置為紅色背景，而孫級(jí)div并不想套用這樣的樣式，顯然，后代選擇器不適應(yīng)與這種情況，這里可以使用子元素選擇器。
.class_name > div {
background: red;
}
如上所示，子元素選擇器比后代選擇器多了一個(gè)大于號(hào)>，表示直接做用于子元素，不會(huì)應(yīng)用的子級(jí)以后的元素。如果將上面的那段HTML應(yīng)用這個(gè)CSS樣式的話，只用第二層的div元素被設(shè)置為紅色，而最里面的div元素不會(huì)套用這種樣式。
2.2 偽類選擇器
偽類選擇器很有意思，利用它可以為HTML文檔中一些也許存在，也許不存在的元素結(jié)構(gòu)指定樣式。它不像其他選擇器利用元素類型、ID或者class等來(lái)為元素指定樣式，而是用條件選擇來(lái)指定。具體屬性看下表：
| 選擇器 | 含義 |
|---|---|
| E:first-child | 選擇父元素的第一個(gè)子元素 |
| E:link | 匹配所有未被訪問(wèn)的超鏈接 |
| E:visited | 匹配所有已經(jīng)被訪問(wèn)的超鏈接 |
| E:active | 匹配鼠標(biāo)按下還未被釋放的元素 |
| E:hover | 匹配鼠標(biāo)當(dāng)前懸停的元素 |
| E:focus | 匹配獲得焦點(diǎn)的元素 |
| E:lang(c) | 匹配lang值等于c或者有多個(gè)用-隔開(kāi)的單詞構(gòu)成lang值，且其中包含等于c的單詞塊的元素 |
以上是常用的偽類選擇器，具體說(shuō)明在表中不再贅述。
2.3 屬性選擇器
屬性選擇器是經(jīng)常用到的選擇器，應(yīng)用范圍寬泛，也非常實(shí)用。下面用一個(gè)表格列出。
| 選擇器 | 含義 |
|---|---|
| E[attribute] | 匹配有attribute屬性的元素，不考慮其他因素，也可以省略直接匹配所有類型元素 |
| E[attribute =val] | 匹配所有attribute屬性等于val的元素 |
| E[attribute ~=val] | 匹配所有attribute屬性值中有多個(gè)用空格隔開(kāi)的值，其中包含“val”的元素 |
| E[attribute |=val] | 匹配所有 att 屬性具有多個(gè)連字號(hào)分隔（hyphen-separated）且以 “val” 開(kāi)頭的元素，主要用于 lang 屬性，比如 “en”、“en-us”、“en-gb” 等等 |
選擇器暫且介紹這么多，基礎(chǔ)的選擇器想必早已爛熟于心，就不贅述了。
三、優(yōu)先級(jí)與權(quán)重
設(shè)想一種情況：
一個(gè)div長(zhǎng)這個(gè)樣子
<div class=".class_name">
</div>
嗯，只是一個(gè)簡(jiǎn)單的不能再簡(jiǎn)單的div，再來(lái)一個(gè)CSS
.class_name {background: red;}
div {background: green;}
* {background: yellow;}
這有點(diǎn)腦殼疼了，一下給那么多選擇器設(shè)置樣式，到底會(huì)變成什么背景色呢？這里引出一個(gè)選擇器特殊性的概念，元素會(huì)根據(jù)選擇性的特殊性來(lái)決定所應(yīng)用樣式的次序，特殊性更高的規(guī)則樣式將會(huì)被優(yōu)先運(yùn)用。
選擇器的特殊性由選擇器本身的組件確定。特殊性值表述為4各部分：0,0,0,0。可以看做是一個(gè)四位數(shù)，一個(gè)初始情況下等于0的四位數(shù)，具體特殊性規(guī)則如下：
- 對(duì)于內(nèi)聯(lián)樣式的聲明，其權(quán)重為1000
- 對(duì)于ID選擇器，其權(quán)重為100
- 對(duì)于類選擇器、屬性選擇、偽類選擇，其權(quán)重為10
- 對(duì)于類型選擇器、為元素，其權(quán)重為1
- 結(jié)合符、通配符沒(méi)有特殊性貢獻(xiàn)
下面給出幾個(gè)簡(jiǎn)單的例子：
#id {background: red;} //0,1,0,0
.class_name {background: green;} //0,0,1,0
* {background: yellow;} //0,0,0,0
.class_name #id {color:blue;} //0,1,1,0
p em {background: yellow;} //0,0,0,2
div#id *[href] {background: yellow;} //0,1,1,1
需要注明的是，有時(shí)候我們需要一個(gè)元素權(quán)重特別大，大到任何選擇器都無(wú)法影響的地步。重要聲明可以滿足要求，它長(zhǎng)這樣：!important，形象一點(diǎn)說(shuō)!important的權(quán)重約等于無(wú)窮。下面是它的用法
.class_name {
background: red !important;
}
在一條聲明的后面，分號(hào)前插入一個(gè)!impotant即可，如果有多條聲明需要重要，那么每一條都要寫(xiě)。
