一、class 和 id 的使用場(chǎng)景
（1） id :指定標(biāo)簽的唯一標(biāo)識(shí)。
（2）class :指定標(biāo)簽的類(lèi)名，可以重復(fù)使用。
一個(gè)擴(kuò)展，關(guān)于name，id，class
二、CSS選擇器常見(jiàn)的有幾種?
（1）基礎(chǔ)選擇器
| 選擇器 | 含義 |
|---|---|
| * | 通用元素選擇器，匹配頁(yè)面任何元素 |
| #id | id選擇器，匹配特定id的元素 |
| .class | 類(lèi)選擇器，匹配class包含特定的元素 |
| element | 標(biāo)簽選擇器 |
（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 | 選擇器與選擇器連寫(xiě)的時(shí)候中間沒(méi)有分割符“,”，“.”和“#”為本身充當(dāng)分隔符的元素 |
| element#id | 連寫(xiě)時(shí)中間沒(méi)有分隔符 |
（3）屬性選擇器
| 選擇器 | 含義 |
|---|---|
| E[attr] | 匹配所有具有屬性attr的元素，div[id]就能取到所有id屬性的div |
| E[attr=value] | 匹配屬性attribute值為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）偽類(lèi)選擇器
| 選擇器 | 含義 |
|---|---|
| E:first-child | 匹配作為長(zhǎng)子（第一個(gè)子女）的元素E |
| 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:selection | 匹配用戶當(dāng)前選中的元素 |
| 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()作用類(lèi)似，但是僅匹配使用同種標(biāo)簽的元素 |
| E:nth-last-of-type(n) | 與:nth-last-child() 作用類(lèi)似，但是僅匹配使用同種標(biāo)簽的元素 |
（5）偽元素選擇器
| 選擇器 | 含義 |
|---|---|
| E::first-line | 匹配E元素內(nèi)容的第一行 |
| E::first-letter | 匹配E元素內(nèi)容的第一個(gè)字母 |
| E::before | 在E元素之前插入生成的內(nèi)容 |
| E::after | 在E元素之后插入生成的內(nèi)容 |
三、選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)？
（1）簡(jiǎn)單情況下（從高到低分別是）
- 在屬性后面使用!important會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。
- 作為style屬性寫(xiě)在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id 選擇器
- 類(lèi)選擇器、偽類(lèi)選擇器、屬性選擇器
- 標(biāo)簽選擇器、偽元素選擇器
- 通配符選擇器
- 瀏覽器自定義
（2）復(fù)雜情況下
- 把選擇器按照如圖所示分類(lèi)成a、b、c、d四類(lèi)
- css對(duì)照這個(gè)標(biāo)準(zhǔn)算出a、b、c、d各自的值
- 根據(jù)a、b、c、d的順序依次比較兩個(gè)css。即先比較a，誰(shuí)大誰(shuí)的優(yōu)先級(jí)高，如果a一樣再比較b，依次類(lèi)推。
四、a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
它的順序如下
原理：是根據(jù)css規(guī)則的覆蓋原理，和瀏覽器解釋CSS時(shí)遵循的“就近原則”；
這里有一個(gè)很詳細(xì)的解說(shuō)，一定要看一看，尤其是后面的例子~（= v =）~
然后其中有一個(gè)總結(jié)
- 一句話:在CSS中，如果對(duì)于相同元素有針對(duì)不同條件的定義，宜將最一般的條件放在最上面，并依次向下，保證最下面的是最特殊的條件。
這樣，瀏覽器在顯示元素時(shí)，才會(huì)從特殊到一般、逐級(jí)向上驗(yàn)證條件，才會(huì)使你的每一個(gè)CSS語(yǔ)句都起到效果。
五、以下選擇器分別是什么意思?
（1）
（2）列出你知道的偽類(lèi)選擇器
- a:link {} /* 未訪問(wèn)的鏈接 /
a:visited {} / 已訪問(wèn)的鏈接 /
a:hover {} / 鼠標(biāo)移動(dòng)到鏈接上 /
a:active {} / 選定的鏈接 */
- :first-child /首個(gè)子對(duì)象/
（3）div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別（注意空格的作用）
- div:first-child 匹配父元素下，作為第一個(gè)子元素的div元素
- div:first-of-type 匹配父元素的子元素中，第一個(gè)div元素
- div :first-child 匹配所有div元素內(nèi)所有元素中屬于其父元素的首個(gè)子元素
- div :first-of-type 匹配所有div元素內(nèi)所有元素中屬于其父元素的首個(gè)類(lèi)型的子元素
這里有我測(cè)試的幾組圖片，可以根據(jù)含義感受下，最好自己寫(xiě)幾組感受下（感覺(jué)可以多包含一些，這個(gè)例子還不全面）
（4）運(yùn)行如下代碼，解析下輸出樣式的原因
- .item1:first-child，是在ct這個(gè)父元素中第一個(gè)子元素并且這個(gè)第一個(gè)子元素的類(lèi)名為“item1”（如果第一個(gè)子元素不是“item1”，則不匹配）
- .item1:first-of-type,就是指所有類(lèi)名為“item1”的子元素中的第一個(gè)。這里“aa”是p類(lèi)型的第一個(gè)，“bb”是h3類(lèi)型的第一個(gè)。
