1、class 和 id 的使用場(chǎng)景?
class選擇含有相同類(lèi)名的一類(lèi)元素，可以大量使用雷客，適用于具有相同特點(diǎn)的元素。
id選擇完全匹配id名的唯一元素桥狡，應(yīng)減少使用搅裙，適用于具有特殊性的元素。
2裹芝、CSS選擇器常見(jiàn)的有幾種?
基礎(chǔ)選擇器：通用元素選擇器部逮、id選擇器、類(lèi)選擇器嫂易、標(biāo)簽選擇器兄朋。
組合選擇器：多元素選擇器、后代選擇器怜械、子元素選擇器颅和、直接相鄰選擇器、普通相鄰選擇器缕允、兼有選擇器（.class1.class2或elment.#id）峡扩。
屬性選擇器：E[attr] 、E[attr = value]等障本。
偽類(lèi)選擇器：E:link教届、E:visited响鹃、E:active、E:hover案训、E:focus买置、E:first-child 哮笆、E:checked死相、E::selection、E:nth-child(n)桂对、E:nth-last-child(n)脆栋、E:nth-of-type(n)等。
偽元素選擇器：E::first-line洒擦、E::first-letter椿争、E::before、E::after
3熟嫩、選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)秦踪？
1、選擇器的優(yōu)先級(jí)：
(1)單獨(dú)屬性>全體屬性掸茅；
(2)直接屬性>繼承屬性椅邓；
(3)!important屬性>內(nèi)聯(lián)樣式>內(nèi)部樣式=外部樣式；
(4)相同優(yōu)先級(jí)的規(guī)則昧狮，寫(xiě)在后面的會(huì)覆蓋前面的景馁。
(5)id選擇器>>類(lèi)選擇器>偽類(lèi)選擇器=屬性選擇器>>標(biāo)簽選擇器=偽元素>通配符選擇器>瀏覽器自定義。 (注：>>表示優(yōu)先一個(gè)級(jí)別逗鸣，>表示同一級(jí)別略優(yōu)先合住，=表示優(yōu)先級(jí)相同)
2、復(fù)雜場(chǎng)景下列出a,b,c三值數(shù)組比較
記ID選擇器的個(gè)數(shù)為a
記類(lèi)選擇器撒璧、偽類(lèi)選擇器透葛、屬性選擇器的個(gè)數(shù)為b
記類(lèi)型選擇器（元素名）、偽元素選擇器的個(gè)數(shù)為c
忽略所有的通配選擇器（*）
注意：
將a, b,c連接起來(lái)構(gòu)成整個(gè)選擇符的優(yōu)先級(jí)卿樱。
4僚害、a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么繁调？
順序：a:link/a:visited,a:hover,a:active萨蚕。
理由：1.四個(gè)選擇器優(yōu)先級(jí)相等，后面的樣式會(huì)覆蓋前面的樣式涉馁。
2.a:link/a:visited是基于鏈接不同的狀態(tài)定義因此不會(huì)沖突门岔，二者順序無(wú)所謂。
3.a:hover是當(dāng)鼠標(biāo)懸停于鏈接的樣式烤送，鼠標(biāo)懸停時(shí)和鏈接不同狀態(tài)的樣式都會(huì)生效因此后面的會(huì)覆蓋前面的寒随，為了讓鼠標(biāo)懸停產(chǎn)生效果就應(yīng)該放在a:link/a:visited后面。
4.a:active是鼠標(biāo)點(diǎn)擊為離開(kāi)鏈接的樣式，鼠標(biāo)點(diǎn)擊未離開(kāi)鏈接時(shí)妻往，鼠標(biāo)自然也就懸停在鏈接上方互艾，二者都會(huì)生效，后面的覆蓋前面的讯泣，為了讓鼠標(biāo)點(diǎn)擊產(chǎn)生效果就應(yīng)該放在a:hover后面纫普。
5、以下選擇器分別是什么意思?
#header{} id名為head的元素
.header{} 類(lèi)名包括“header”的元素
.header .logo{} .header后代中的.logo
.header.mobile{} 類(lèi)名兼有“header”和“mobile”的元素
.header p, .header h3{} .header后代中的p和h3
#header .nav>li{} #header后代中的.nav的子元素中的li
#header a:hover{} #header后代中的a元素鼠標(biāo)懸停
#header .logo~p{} #header后代中的.logo后的與其同級(jí)的p元素
#header input[type="text"]{} #header后代中的具有type(屬性)="text（值）"的input元素
6好渠、列出你知道的偽類(lèi)選擇器：
| 選擇器 | 含義 |
|---|---|
| E:first-child | 匹配父元素的首個(gè)子元素中的每個(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:checked | 匹配表單中被選中的radio或checkbox元素 |
| E::selection | 匹配用戶當(dāng)前選中的元素 |
| E:nth-child(n) | 匹配父元素的第n個(gè)子元素中的每個(gè)E元素，第一個(gè)編號(hào)為1 |
| E:last-child | 匹配父元素的末個(gè)子元素中的每個(gè)E元素拳锚，等同于:nth-last-child(1) |
| E:nth-last-child(n) | 匹配父元素的倒數(shù)第n個(gè)子元素中的E元素假栓，第一個(gè)編號(hào)為1 |
| E:only-child | 匹配父元素下僅有的一個(gè)子元素中的E元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
| E:first-of-type | 匹配父元素的子元素中E元素中的首個(gè)元素霍掺，等同于:nth-of-type(1) |
| E:nth-of-type(n) | 與:nth-child()作用類(lèi)似匾荆，但是僅匹配使用同種標(biāo)簽的元素 |
| E:last-of-type | 匹配父元素的子元素中E元素的最后一個(gè)，等同于:nth-last-of-type(1) |
| E:nth-last-of-type(n) | 與:nth-last-child() 作用類(lèi)似杆烁，但是僅匹配使用同種標(biāo)簽的元素 |
| E:only-of-type | 匹配父元素的子元素中僅有的E元素牙丽，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
7、div:first-child兔魂、div:first-of-type烤芦、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
| 標(biāo)簽 | 作用 |
|---|---|
| div:first-child | 匹配父元素的首個(gè)子元素中的每個(gè)div元素 |
| div:first-of-type | 匹配父元素的子元素中div元素中的首個(gè)元素 |
| div :first-child | 匹配div下的第一個(gè)子元素 |
| div :first-of-type | 匹配div下的子元素中使用同種類(lèi)型標(biāo)簽的第一個(gè)元素 |
8、運(yùn)行如下代碼析校，解析下輸出樣式的原因拍棕。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
1、aa的color為red勺良，因?yàn)樗谠厥?itme1的父元素.ct的第一個(gè)子元素绰播。
2、aa和bb的background-color為bule尚困，因?yàn)閍a所在元素是.itme1的父元素.ct的子元素中第一個(gè)p標(biāo)簽蠢箩，bb所在元素是.itme1的父元素.ct的子元素中第一個(gè)h3標(biāo)簽。
