1 class 和 id 的使用場景?
id:指定標(biāo)簽的唯一標(biāo)識按摘。使用#name定義（name為id名包券，可任意取名）纫谅，使用id="name"調(diào)用，其優(yōu)先級高于類選擇器兴使，一個(gè)標(biāo)簽只能有一個(gè)id且每個(gè)id只能使用一次.
class:指定標(biāo)簽的類名系宜。用于CSS操作，把一些特定樣式放到一個(gè)class類中发魄，需要此樣式的標(biāo)簽盹牧，可以在添加此類。 可以把多個(gè)類励幼，放在一個(gè)class屬性里汰寓，但必須用空格隔開；如：class='btn btnopen'
2.CSS選擇器常見的有幾種?
常用幾種選擇器有：ID選擇器苹粟，類選擇器有滑，元素選擇器，子選擇器嵌削，后代選擇器毛好，偽類選擇器，屬性選擇器等苛秕。這些選擇器的常用表示方式是：
ID選擇器：#container {}
類選擇器：.box{}
元素選擇器：p {}
子選擇器：ul > li {}
后代選擇器：div p {}
偽類選擇器：a:visited {}
屬性選擇器：input[type="text"] {}
3.選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計(jì)算優(yōu)先級肌访？
選擇器優(yōu)先級 從高到低分別是：
在屬性后面使用 !important 會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式
作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
id選擇器
類選擇器
偽類選擇器
屬性選擇器
標(biāo)簽選擇器
通配符選擇器
瀏覽器自定義
4. a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么艇劫？
/*順序是這樣的*/
a:link {
color: #000;
}
a:visited {
color: black;
}
a:hover {
color: yellow;
}
a:active {
color: red;
}
a:link,a:visited,這兩個(gè)標(biāo)簽必須放在最前面吼驶，因?yàn)楫?dāng)鼠標(biāo)放在a標(biāo)簽上時(shí)，寫在最后的選擇器會(huì)覆蓋掉之前的選擇器店煞，想實(shí)現(xiàn)“當(dāng)鼠標(biāo)移動(dòng)到a標(biāo)簽上變換顏色”的效果蟹演，需要將a:hover置于 a:link 和 a:visited 之后
a:link,a:visited,a:hover和a:active，當(dāng)鼠標(biāo)點(diǎn)擊a標(biāo)簽顷蟀，這四個(gè)選擇器擁有相同的優(yōu)先級酒请，但是被寫在最后的選擇器會(huì)覆蓋掉之前的選擇器，要想實(shí)現(xiàn)“當(dāng)鼠標(biāo)點(diǎn)擊a標(biāo)簽時(shí)變換顏色”的效果衩椒，需要將a:active放在最后蚌父。
只要記住，最簡單的放在最上面毛萌，最復(fù)雜的在最下面。
5. 以下選擇器分別是什么意思?
#header{ /*選擇id是header的元素*/
}
.header{ /*選擇class是header的元素*/
}
.header .logo{ /*選擇class是header的元素下class是logo的所有元素*/
}
.header.mobile{ /*選擇class值包含header和mobile的元素*/
}
.header p, .header h3{ /*選擇class是header的元素后代中所有p標(biāo)簽和h3標(biāo)簽*/
}
#header .nav>li{ /*選擇id是header的元素后代中喝滞，class是nav的元素的直接子元素li*/
}
#header a:hover{ /*選擇id是header的元素的后代中鼠標(biāo)懸停的a元素*/
}
#header .logo~p{ /*選擇id是header的元素的后代中class是logo的元素的同級的p元素*/
}
#header input[type="text"]{ /*在id值為header的元素后代中尋找type屬性為”text"的input元素*/
}
6.列出你知道的偽類選擇器
E:first-child：匹配元素E的第一個(gè)子元素
E:nth-child：匹配元素E的第n個(gè)子元素
E:enabled和E:disabled：匹配元素E的狀態(tài)為可用/不可用
E:checked：匹配元素E的狀態(tài)為單選框選中
E:selection：匹配用戶當(dāng)前選中的元素阁将，多用于文字被鼠標(biāo)拉動(dòng)選中
a:link：未被點(diǎn)擊的鏈接
a:visited：已被點(diǎn)擊的鏈接
a:hover：鼠標(biāo)懸停其上的鏈接
a:active：鼠標(biāo)已經(jīng)按下，但沒有釋放的鏈接
7.div:first-child和div:first-of-type的作用和區(qū)別右遭？
可以參考問題8
8. 運(yùn)行如下代碼做盅，解析下輸出樣式的原因
<style>
.item1:first-child{
color: red;//選擇id是item1缤削，.ct的第一個(gè)子元素，也就是p標(biāo)簽吹榴，所以aa的字體是紅色
}
.item1:first-of-type{
background: blue;//父元素中每一類元素的第一個(gè)類名為item1的元素的背景色為藍(lán)色亭敢。將div中的子元素分為p、h3兩類標(biāo)簽图筹，每一類取第一個(gè)類名為item1的元素帅刀，背景為藍(lán)色
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
