1缎岗、class 和 id 的使用場(chǎng)景?
class選擇含有相同類名的一類元素，可以大量使用白粉，適用于具有相同特點(diǎn)的元素传泊。
id選擇完全匹配id名的唯一元素鼠渺，應(yīng)減少使用，適用于具有特殊性的元素眷细。
2拦盹、CSS選擇器常見的有幾種?
基礎(chǔ)選擇器：通用元素選擇器、id選擇器溪椎、類選擇器普舆、標(biāo)簽選擇器。
組合選擇器：多元素選擇器校读、后代選擇器奔害、子元素選擇器、直接相鄰選擇器地熄、普通相鄰選擇器、兼有選擇器（.class1.class2或elment.#id）芯杀。
屬性選擇器：E[attr] 端考、E[attr = value]等。
偽類選擇器：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ī)則，寫在后面的會(huì)覆蓋前面的褒搔。
(5)id選擇器>>類選擇器>偽類選擇器=屬性選擇器>>標(biāo)簽選擇器=偽元素>通配符選擇器>瀏覽器自定義阶牍。 (注：>>表示優(yōu)先一個(gè)級(jí)別喷面，>表示同一級(jí)別略優(yōu)先，=表示優(yōu)先級(jí)相同)
2走孽、復(fù)雜場(chǎng)景下列出a,b,c三值數(shù)組比較
記ID選擇器的個(gè)數(shù)為a
記類選擇器惧辈、偽類選擇器、屬性選擇器的個(gè)數(shù)為b
記類型選擇器（元素名）磕瓷、偽元素選擇器的個(gè)數(shù)為c
忽略所有的通配選擇器（*）
注意：
將a, b,c連接起來構(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ì)沖突驳庭，二者順序無所謂详幽。
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)擊為離開鏈接的樣式，鼠標(biāo)點(diǎn)擊未離開鏈接時(shí)焰坪，鼠標(biāo)自然也就懸停在鏈接上方，二者都會(huì)生效聘惦，后面的覆蓋前面的某饰，為了讓鼠標(biāo)點(diǎn)擊產(chǎn)生效果就應(yīng)該放在a:hover后面。
5善绎、以下選擇器分別是什么意思?
#header{} id名為head的元素
.header{} 類名包括“header”的元素
.header .logo{} .header后代中的.logo
.header.mobile{} 類名兼有“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黔漂、列出你知道的偽類選擇器：
E:first-child 匹配父元素的首個(gè)子元素中的每個(gè)E元素
E:link 匹配所有未被點(diǎn)擊的鏈接
E:visited 匹配所有已被點(diǎn)擊的鏈接
E:active 匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的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()作用類似，但是僅匹配使用同種標(biāo)簽的元素
E:last-of-type 匹配父元素的子元素中E元素的最后一個(gè)浩聋，等同于:nth-last-of-type(1)
E:nth-last-of-type(n) 與:nth-last-child() 作用類似观蜗，但是僅匹配使用同種標(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ū)別 （注意空格的作用）
div:first-child 匹配父元素的首個(gè)子元素中的每個(gè)div元素
div:first-of-type 匹配父元素的子元素中div元素中的首個(gè)元素
div :first-child 匹配div下的第一個(gè)子元素
div :first-of-type 匹配div下的子元素中使用同種類型標(biāo)簽的第一個(gè)元素
8、運(yùn)行如下代碼砖第，解析下輸出樣式的原因撤卢。
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)簽羽杰。
3.但是６勺稀！？既惕澎！順序問題應(yīng)為.item1:first-of-type{
background: blue;寫在下面所以aa被這句覆蓋也成了藍(lán)色！
