一、CSS選擇器
CSS中選擇器是一種模式岩四，用于選擇需要添加樣式的元素哭尝。
選擇器的基本結(jié)構(gòu)如下
x {
background: red;
}
其中，x是選擇器可以是類(lèi)剖煌，ID材鹦，元素類(lèi)型等等，下面會(huì)具體探討耕姊，后面的花括號(hào)為聲明塊桶唐，對(duì)元素樣式的聲明都包含在其中，每一個(gè)屬性聲明用分號(hào);隔開(kāi)茉兰。
二尤泽、CSS選擇器類(lèi)別
CSS中選擇器主要分為以下幾種：
- 標(biāo)簽選擇器
- ID選擇器
- 類(lèi)選擇器
- 通用選擇器
- 組合選擇器
- 繼承選擇器
- 偽類(lèi)選擇器
- 屬性選擇器
基本的選擇器此處不做贅述，只寫(xiě)幾個(gè)特殊的规脸。
2.1 后代選擇器
.class_name div {
background: red;
}
這里為類(lèi)名為.class_name的元素包含的所有后代div元素設(shè)定樣式坯约，且只針對(duì)其后代不影響同級(jí)或更高級(jí)以及其后代div元素。如果我們將下面代碼制定這樣的CSS樣式的話(huà)莫鸭，會(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樣式的話(huà)到踏，只用第二層的div元素被設(shè)置為紅色，而最里面的div元素不會(huì)套用這種樣式尚猿。
2.2 偽類(lèi)選擇器
偽類(lèi)選擇器很有意思，利用它可以為HTML文檔中一些也許存在楣富，也許不存在的元素結(jié)構(gòu)指定樣式凿掂。它不像其他選擇器利用元素類(lèi)型、ID或者class等來(lái)為元素指定樣式，而是用條件選擇來(lái)指定庄萎。具體屬性看下表：
| 選擇器 | 含義 |
|---|---|
| E:first-child | 選擇父元素的第一個(gè)子元素 |
| E:link | 匹配所有未被訪(fǎng)問(wèn)的超鏈接 |
| E:visited | 匹配所有已經(jīng)被訪(fǎ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的單詞塊的元素 |
以上是常用的偽類(lèi)選擇器，具體說(shuō)明在表中不再贅述糠涛。
2.3 屬性選擇器
屬性選擇器是經(jīng)常用到的選擇器援奢，應(yīng)用范圍寬泛，也非常實(shí)用忍捡。下面用一個(gè)表格列出集漾。
| 選擇器 | 含義 |
|---|---|
| E[attribute] | 匹配有attribute屬性的元素，不考慮其他因素砸脊，也可以省略直接匹配所有類(lèi)型元素 |
| 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ì)于類(lèi)選擇器智哀、屬性選擇、偽類(lèi)選擇荧恍，其權(quán)重為10
- 對(duì)于類(lèi)型選擇器瓷叫、為元素屯吊，其權(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ú)法影響的地步。重要聲明可以滿(mǎn)足要求次氨，它長(zhǎng)這樣：!important蔽介，形象一點(diǎn)說(shuō)!important的權(quán)重約等于無(wú)窮。下面是它的用法
.class_name {
background: red !important;
}
在一條聲明的后面煮寡，分號(hào)前插入一個(gè)!impotant即可虹蓄，如果有多條聲明需要重要，那么每一條都要寫(xiě)洲押。
