1译荞、class 和 id 的使用場(chǎng)景?
id：指定標(biāo)簽的唯一標(biāo)識(shí)怀伦。根據(jù)提供的唯一id號(hào)坏瘩，快速獲取標(biāo)簽對(duì)象。如：document.getElementById(id)润脸。id屬性的值柬脸，在當(dāng)前的page頁(yè)面要是唯一的。
class：指定標(biāo)簽的類名毙驯。CSS操作倒堕，把一些特定樣式放到一個(gè)class類中，需要此樣式的標(biāo)簽爆价，可以在添加此類垦巴。
2媳搪、CSS選擇器常見(jiàn)的有幾種?
1、基礎(chǔ)選擇器骤宣，包括：
通用元素選擇器秦爆，匹配頁(yè)面任何元素。示例：
* { font-family: '微軟雅黑'; }id選擇器憔披，匹配特定id的元素等限。示例：
#id-selector{ color: #333; }類選擇器，匹配class包含(不是等于)特定類的元素芬膝。示例：
.class-selector{ background: #f1f1f1; }標(biāo)簽選擇器望门。示例：
p { height: 50px; line-height: 50px; }
2、組合選擇器
|選擇器 | 含義 |
| -------- |:------------- -----:|
| E,F —多元素選擇器 | 用,分隔锰霜，同時(shí)匹配元素E或元素F |
| E F —后代選擇器 | 用空格分隔筹误，匹配E元素所有的后代元素F |
| E>F —子元素選擇器 | 用空用>分隔，匹配E元素的所有直接子元素 |
| E+F—直接相鄰選擇器 | 匹配E元素之后的相鄰的同級(jí)元素F|
|E~F 普通相鄰選擇器 | 用匹配E元素之后的同級(jí)元素F（無(wú)論直接相鄰與否） |
| .class1.class2 | id和class選擇器和選擇器連寫的時(shí)候中間沒(méi)有分隔符锈遥，. 和 # 本身充當(dāng)分隔符的元素|
|element#id | id和class選擇器和選擇器連寫的時(shí)候中間沒(méi)有分隔符纫事，. 和 # 本身充當(dāng)分隔符的元素|
3、屬性選擇器
|選擇器 | 含義 |
| -------- |:------------- -----:|
| E[attr] | 匹配所有具有屬性attr的元素所灸，div[id]就能取到所有有id屬性的div |
| E[attr = value] | 匹配屬性attr值為value的元素丽惶，div[id=test],匹配id=test的div |
| E[attr ~= value] | 匹配所有屬性attr具有多個(gè)空格分隔、其中一個(gè)值等于value的元素 |
| E[attr ^= value] | 匹配屬性attr的值以value開(kāi)頭的元素|
|E[attr $= value] | 匹配屬性attr的值以value結(jié)尾的元素 |
| E[attr *= value] | 匹配屬性attr的值包含value的元素|
4爬立、偽類選擇器
|選擇器 | 含義 |
| -------- |:------------- -----:|
| E:first-child | 匹配元素E的第一個(gè)子元素 |
| E:link | 匹配所有未被點(diǎn)擊的鏈接|
| E:visited | 匹配所有已被點(diǎn)擊的鏈接 |
|E:active | 匹配鼠標(biāo)已經(jīng)其上按下钾唬、還沒(méi)有釋放的E元素|
|E:hover | 匹配鼠標(biāo)懸停其上的E元素 |
| E:focus | 匹配獲得當(dāng)前焦點(diǎn)的E元素|
| E:lang(c) | 匹配lang屬性等于c的E元素|
| E:enabled| 匹配表單中可用的元素|
| E:disabled | 匹配表單中禁用的元素|
| E:checked | 匹配表單中被選中的radio或checkbox元素|
| E::selection | 匹配用戶當(dāng)前選中的元素|
| E:root | 匹配文檔的根元素，對(duì)于HTML文檔侠驯，就是HTML元素|
|E:nth-child(n)| 匹配其父元素的第n個(gè)子元素抡秆，第一個(gè)編號(hào)為1|
|E:nth-last-child(n) | 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為1 |
| E:nth-of-type(n) | 與:nth-child()作用類似吟策，但是僅匹配使用同種標(biāo)簽的元素|
| E:nth-last-of-type(n) | 與:nth-last-child() 作用類似儒士，但是僅匹配使用同種標(biāo)簽的元素|
| E:last-child| 匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1)|
| E:first-of-type | 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素檩坚，等同于:nth-of-type(1)|
| E:last-of-type | 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素着撩，等同于:nth-last-of-type(1)|
| E:only-child | 匹配父元素下僅有的一個(gè)子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)|
| E:only-of-type | 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素匾委，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)|
| E:empty | 匹配一個(gè)不包含任何子元素的元素拖叙，文本節(jié)點(diǎn)也被看作子元素|
| E:not(selector) | 匹配不符合當(dāng)前選擇器的任何元素|
n的取值：
- 1，2赂乐，3薯鳍，4，5挨措，......
- 2n+1, 2n, 4n-1
- odd, even
5挖滤、偽元素選擇器
|選擇器 | 含義 |
| -------- |:------------- -----:|
| E::first-line | 匹配E元素內(nèi)容的第一行 |
| E::first-letter| 匹配E元素內(nèi)容的第一個(gè)字母 |
| E::before | 在E元素之前插入生成的內(nèi)容 |
| E::after | 在E元素之后插入生成的內(nèi)容 |
3崩溪、選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)？
從高到低分別是：
1壶辜、在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
2悯舟、作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3、id選擇器
4砸民、類選擇器抵怎、
5、偽類選擇器
6岭参、屬性選擇器
7反惕、標(biāo)簽選擇器
8、通配符選擇器
9演侯、瀏覽器自定義
對(duì)于復(fù)雜的情況姿染，例如CSS規(guī)則由多個(gè)選擇器組成：
#test p.class1 {...}
#test .class1.class2 {...}
要計(jì)算諸如上述復(fù)雜場(chǎng)景的優(yōu)先級(jí)，這時(shí)候我們可以做個(gè)簡(jiǎn)單的加法運(yùn)算秒际，id選擇器的權(quán)值為1000悬赏，class選擇器為100，標(biāo)簽選擇器為10娄徊，做一下運(yùn)算（當(dāng)然只是為了形象這么說(shuō)闽颇，一萬(wàn)個(gè)class選擇器加起來(lái)也不如一個(gè)id選擇器優(yōu)先級(jí)高）
這樣我們就能得知第二條的規(guī)則優(yōu)先級(jí)高一些，但是還有一種情況：
#parent p.class1
div #child.class1
<div id="parent">
<p id="child" class="class1">
Text
</p>
</div>
按照我們剛才的方法計(jì)算寄锐，兩個(gè)的權(quán)值時(shí)相同的兵多，這時(shí)候應(yīng)該用那條規(guī)則呢？簡(jiǎn)單來(lái)說(shuō)一句話誰(shuí)更具體用誰(shuí)橄仆，也就是權(quán)值高的選擇器作用的越具體優(yōu)先級(jí)越高
我們可以看到兩個(gè)選擇器作用的元素都是p標(biāo)簽剩膘，id選擇器權(quán)值最高，第一條規(guī)則作用在了父元素上盆顾，第二條規(guī)則直接作用在了p標(biāo)簽本身上怠褐，所以我們認(rèn)為第二條選擇器的優(yōu)先級(jí)高
如果兩個(gè)選擇器規(guī)權(quán)值就是一樣，我們改怎么判斷呢您宪？ 后面的覆蓋前面的惫搏！
div {color: #333;}
....
div {color: #666;}
這樣div文案的顏色明顯會(huì)是#666
總而言之判斷CSS選擇器規(guī)則優(yōu)先級(jí)很簡(jiǎn)單，每個(gè)選擇器本身有優(yōu)先級(jí)蚕涤，越具體優(yōu)先級(jí)越高
4、a:link, a:hover, a:active, a:visited 的順序是怎樣的铣猩？ 為什么揖铜？
a:link：
用來(lái)定義超鏈接被訪問(wèn)前的樣式。
a:visited：
用來(lái)定義鏈接被訪問(wèn)后的樣式达皿。
a:hover:
用來(lái)定義鼠標(biāo)放到鏈接上天吓，但鼠標(biāo)鍵未被按下時(shí)的樣式贿肩。
a:active:
用來(lái)定義鼠標(biāo)放到連接上，并被按下時(shí)的樣式龄寞。
正確的順序?yàn)? a:link汰规、a:visited、a:hover物邑、a:active (其中溜哮，link和visited可以互換)；
原因：
- 鼠標(biāo)經(jīng)過(guò)的“未訪問(wèn)鏈接”可應(yīng)用a:link色解、a:hover茂嗓、a:active 這三種偽類選擇器來(lái)定義樣式，因?yàn)楹竺娴臉邮綍?huì)覆蓋前面的樣式科阎，所以a:hover應(yīng)放在a:link的后面述吸，a:active放在最后。
- 鼠標(biāo)經(jīng)過(guò)的“已訪問(wèn)鏈接”可應(yīng)用a:visited锣笨、a:hover蝌矛、a:active這三種類選擇器來(lái)定義樣式，因?yàn)楹竺娴臉邮綍?huì)覆蓋前面的樣式错英，所以a:hover應(yīng)放在a:hovor的后面入撒，a:active放在最后。
所以說(shuō)走趋，a:hover定義一定要放在a:link衅金、a:visited的后面，a:active 放在最后簿煌。
