一.class 和 id 的使用場(chǎng)景?
類應(yīng)該應(yīng)用于概念上相似的元素，這些元素可以出現(xiàn)在同一頁(yè)面上的多個(gè)位置控漠，而ID應(yīng)該應(yīng)用于不同的唯一的元素蔓倍。
二.CSS選擇器常見(jiàn)的有幾種?
2.1 基礎(chǔ)選擇器
（1）* 通用元素選擇器悬钳，匹配頁(yè)面任何元素（這也就決定了我們很少使用）
（2）#id id選擇器，匹配特定id的元素
（3）.class 類選擇器偶翅，匹配class包含(不是等于)特定類的元素
（4）element 標(biāo)簽選擇器
2.2組合選擇器
（1）E,F 多元素選擇器默勾，用,分隔，同時(shí)匹配元素E或元素F
（2）E F 后代選擇器聚谁，用空格分隔母剥，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F
（3）E>F 子元素選擇器垦巴，用>分隔媳搪，匹配E元素的所有直接子元素
（4）E+F 直接相鄰選擇器，匹配E元素之后的相鄰的同級(jí)元素F
（5）E~F 普通相鄰選擇器（弟弟選擇器）骤宣，匹配E元素之后的同級(jí)元素F（無(wú)論直接相鄰與否）
（6）.class1.class2 id和class選擇器和選擇器連寫(xiě)的時(shí)候中間沒(méi)有分隔符，.和 # 本身充當(dāng)分隔符的元素
（7）element#id id和class選擇器和選擇器連寫(xiě)的時(shí)候中間沒(méi)有分隔符序愚，.和 #本身充當(dāng)分隔符的元素
2.3屬性選擇器
（1）E[attr] 匹配所有具有屬性為attr的元素（div[id]能選擇所有具有id屬性的div）
（2）E[attr=value] 匹配所有屬性為value的元素（div[type=text]匹配id=text的div）
（3）E[attr~=value] 匹配所有屬性attr具有多個(gè)空格分隔憔披，其中一個(gè)值等于value的元素
（4）E[attr ^=value] 匹配屬性attr的值以value開(kāi)頭的元素
（5）E[attr $=value] 匹配屬性attr的值以value結(jié)尾的元素
（6）E[attr *=value] 匹配屬性attr的值包含value的元素
2.4偽類選擇器
（1）E:first-child 匹配元素E的第一個(gè)子元素
（2）E:last-child 匹配元素e的最后一個(gè)子元素
（3）E:nth-child(n) 匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1
（4）E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素爸吮，等同于nth-of-type(1)
（5）E:hover 匹配鼠標(biāo)懸停智商的e元素
（6）E:focus 匹配獲得焦點(diǎn)的e元素
偽元素選擇器
（7）E::first-line 匹配E元素的第一行
（8）E::first-letter 匹配E元素的第一個(gè)字母
（9）E::before 在e元素之前插入生成的內(nèi)容
（10）E::after 在e元素之后插入生成的內(nèi)容
三.選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)芬膝？
1.屬性后+!important。使用此標(biāo)記的CSS屬性總是最優(yōu)先的
2.內(nèi)聯(lián)樣式：
3.id選擇器： #id
4.類選擇器： .class
5.偽類選擇器：a:link
6.屬性選擇器：h1{}
7.標(biāo)簽選擇器：p[XXX]
8.通用選擇器：*
9.瀏覽器自定義
四.a:link, a:hover, a:active, a:visited 的順序是怎樣的形娇？ 為什么锰霜？
- 解釋：
link:連接平常的狀態(tài)
visited:連接被訪問(wèn)過(guò)之后
hover:鼠標(biāo)放到連接上的時(shí)候
active:連接被按下的時(shí)候 -
排列順序
a:link
a:visited
a:hover
a:active
原因：
在CSS樣式中，最后聲明的CSS代碼效果要覆蓋先前聲明的代碼的效果桐早。
例如：
<style type="text/css"> div{ font-size:12px; } div{ font-size:16px; } </style> </head> <body> <div>螞蟻部落</div> </body>
在以上代碼中字體的大小是16px癣缅，最后聲明的代碼優(yōu)先級(jí)要高。
盡管每一個(gè)偽類看起來(lái)類似于一個(gè)不同的選擇器哄酝，其實(shí)它們都是對(duì)鏈接的不同狀態(tài)的樣式的定義友存，可以認(rèn)為它們是相同的選擇器，是可以相互覆蓋陶衅，也就是說(shuō)這幾個(gè)偽類之間也是遵循上面所說(shuō)的優(yōu)先級(jí)原則的屡立。
所以當(dāng)鏈接被點(diǎn)擊之后， a:visited所聲明的樣式就會(huì)生效搀军，當(dāng)把鼠標(biāo)放到鏈接之上或者當(dāng)鼠標(biāo)指針在鏈接之上并且按下鼠標(biāo)鍵的時(shí)候a:hover或者a:active所聲明的樣式會(huì)被a:visited所覆蓋膨俐。
為了正確的顯示鏈接樣式效果，我們可以遵循這樣的原則罩句，只要a:visited位于a:hover和a:active之前就可以實(shí)現(xiàn)正確的效果焚刺。
五.以下選擇器分別是什么意思
六.div:first-child和div:first-of-type的作用和區(qū)別
div:first-child用來(lái)選擇div元素的第一個(gè)子元素
div:first-of-type選擇div元素的特定類型的首個(gè)子元素的每個(gè)元素。
七.運(yùn)行如下代碼的止，解析下輸出樣式的原因
