1. class 和 id 的使用場(chǎng)景?
對(duì)于CSS而言春宣，id和class都是選擇器翠忠。
1. ID具有唯一性运沦，Class具有普遍性。
2. ID是唯一的特愿，所以盡量在結(jié)構(gòu)外圍使用班缰，通常用于頁(yè)面布局勋磕。
3. Class是可重復(fù)的，所以盡量在結(jié)構(gòu)內(nèi)部使用犀概，通常用于樣式定義立哑。
4. ID的樣式優(yōu)先級(jí)高于Class。
2. CSS選擇器常見的有幾種?
CSS常用幾種選擇器有：ID選擇器姻灶，類選擇器铛绰，元素選擇器，子選擇器产喉，后代選擇器捂掰，偽類選擇器，屬性選擇器等曾沈。這些選擇器的常用表示方式是：
ID選擇器：#container {}
類選擇器：.box{}
元素選擇器：p {}
子選擇器：ul > li {}
后代選擇器：div p {}
偽類選擇器：a:visited {}
屬性選擇器：input[type="text"] {}
3. 選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)这嚣？
在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。
作為style屬性寫在元素內(nèi)的樣式
id選擇器
類選擇器
標(biāo)簽選擇器
通配符選擇器
瀏覽器自定義或繼承
分4個(gè)等級(jí)的定義如下：
第一等：代表內(nèi)聯(lián)樣式塞俱，如: style=””姐帚，權(quán)值為1000。
第二等：代表ID選擇器障涯，如：#content罐旗，權(quán)值為100膳汪。
第三等：代表類，偽類和屬性選擇器九秀，如.content遗嗽，權(quán)值為10。
第四等：代表類型選擇器和偽元素選擇器颤霎，如div p媳谁，權(quán)值為1。
4. a:link, a:hover, a:active, a:visited 的順序是怎樣的友酱？ 為什么晴音？
link:連接平常的狀態(tài) active:連接被按下的時(shí)候 visited:連接被訪問(wèn)過(guò)之后 hover:鼠標(biāo)放到連接上的時(shí)候
a:link{text-decoration:none ; color:#c00 ;}
a:visited {text-decoration:none ; color:#c30 ;}
a:hover {text-decoration:underline ; color:#f60 ;}
a:active {text-decoration:none ; color:#F90 ;}
5. 以下選擇器分別是什么意思?
#header{ } id為header的元素
.header{ } class為header的元素
.header .logo{ } class為header 子元素中 class為logo的元素
.header.mobile{ } class同時(shí)包含header和mobile的元素
.header p, .header h3{ } class為header元素中的p標(biāo)簽和h3標(biāo)簽
#header .nav>li{ } id為header的class為nav元素的直接子元素為li的標(biāo)簽
#header a:hover{ } id為header元素中的a標(biāo)簽的hover狀態(tài)
#header .logo~p{ } id為header下 class為logo標(biāo)簽之后所有的p標(biāo)簽
#header input[type=“text”]{ } id為header的后代中，input標(biāo)簽中缔杉，屬性type的值為"text"的元素集合
6. 列出你知道的偽類和偽元素
偽類選擇器
:first-child 選擇元素的第一個(gè)子元素
:link 指示作為超鏈接（即有一個(gè)href屬性）并指向一個(gè)未訪問(wèn)地址的所有錨
:visited 指示作為已訪問(wèn)地址超鏈接的所有的錨
:hover 指示鼠標(biāo)指針停留在那個(gè)元素上
:active 指示被用戶輸入激活的元素
:focus 可以接受鍵盤輸入或者能以某種方式激活的元素
:lang() 根據(jù)元素的語(yǔ)言來(lái)選擇
CSS3新增:
E:not(s) 匹配不含有s選擇符的元素E
E:root 匹配E元素在文檔的根元素
E:last-child 匹配父元素的最后一個(gè)子元素E
E:only-child 匹配父元素僅有的一個(gè)子元素E
E:nth-child(n) 匹配父元素的第n個(gè)子元素E
E:nth-last-child(n) 匹配父元素的倒數(shù)第n個(gè)子元素E
E:first-of-type 匹配同類型中的第一個(gè)同級(jí)兄弟元素E
E:last-of-type 匹配同類型中的最后一個(gè)同級(jí)兄弟元素E
E:only-of-type 匹配同類型中的唯一的一個(gè)同級(jí)兄弟元素E
E:nth-of-type(n) 匹配同類型中的第n個(gè)同級(jí)兄弟元素E
E:nth-last-of-type(n) 匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素E
E:empty 匹配沒有任何子元素（包括text節(jié)點(diǎn)）的元素E
E:checked 匹配用戶界面上處于選中狀態(tài)的元素E锤躁。(用于input type為radio與checkbox時(shí))
E:enabled 匹配用戶界面上處于可用狀態(tài)的元素E
E:disabled 匹配用戶界面上處于禁用狀態(tài)的元素E
E:target 匹配相關(guān)URL指向的E元素
:first-child、:link和:visited是靜態(tài)偽類或详，:focus系羞、:hover和:active是動(dòng)態(tài)偽類
結(jié)合偽類: 如: a:link:hover = a:hover:link 順序并不重要，但是不要把互斥的偽類結(jié)合在一起使用霸琴。如 a:link:vistited沒有任何意義
偽元素
:first-letter 設(shè)置首字母樣式
:first-line 設(shè)置第一行樣式
:before 設(shè)置之前
:after 設(shè)置之后
CSS3新增:
::placeholder
::selection
在CSS3中為了和偽類進(jìn)行區(qū)分椒振，寫法為::first-letter、::first-line梧乘、::first-line澎迎、::first-line
:first-letter和:first-line 使用都是有限制的。另外选调，所有偽元素都必須放在出現(xiàn)該偽元素的選擇器的最后面夹供。
7. div:first-child和div:first-of-type的作用和區(qū)別
:first-child選擇器是css2中定義的選擇器，從字面意思上來(lái)看也很好理解仁堪，就是第一個(gè)子元素
<div>
<p>第一個(gè)子元素</p>
<h2>第二個(gè)子元素</h2>
<span>第三個(gè)子元素</span>
<span>第四個(gè)子元素</span>
</div>
p:first-child 匹配到的是p元素,因?yàn)閜元素是div的第一個(gè)子元素哮洽；
h1:first-child 匹配不到任何元素，因?yàn)樵谶@里h1是div的第二個(gè)子元素弦聂，而不是第一個(gè)鸟辅；
span:first-child 匹配不到任何元素，因?yàn)樵谶@里兩個(gè)span元素都不是div的第一個(gè)子元素莺葫；
:first-child 匹配到的是p元素,因?yàn)樵谶@里div的第一個(gè)子元素就是p剔桨。
在css3中又定義了:first-of-type這個(gè)選擇器
<div>
<p>第一個(gè)子元素</p>
<h2>第二個(gè)子元素</h2>
<span>第三個(gè)子元素</span>
<span>第四個(gè)子元素</span>
</div>
p:first-of-type 匹配到的是p元素,因?yàn)閜是div的所有為p的子元素中的第一個(gè)，事實(shí)上這里也只有一個(gè)為p的子元素徙融；
h1:first-of-type 匹配到的是h1元素洒缀，因?yàn)閔1是div的所有為h1的子元素中的第一個(gè)，事實(shí)上這里也只有一個(gè)為h1的子元素；
span:first-of-type 匹配到的是第三個(gè)子元素span树绩。這里div有兩個(gè)為span的子元素萨脑，匹配到的是第一個(gè)。
:first-of-type 匹配到的是p元素
所以
:first-child 匹配的是某父元素的第一個(gè)子元素饺饭，可以說(shuō)是結(jié)構(gòu)上的第一個(gè)子元素渤早。
:first-of-type 匹配的是該類型的第一個(gè)，類型是指什么呢瘫俊，就是冒號(hào)前面匹配到的東西鹊杖，比如 p:first-of-type，就是指所有p元素中的第一個(gè)扛芽。這里不再限制是第一個(gè)子元素了骂蓖，只要是該類型元素的第一個(gè)就行了，當(dāng)然這些元素的范圍都是屬于同一級(jí)的川尖，也就是同輩的
