1、class 和 id 的使用場景?
class是調用類選擇器，是用來為同一類標簽具有相同的屬性，類似于一個特征，調用方式用.class name 如定義 <div class="nihao">，調用的時候.nihal{}，就調用了；
id 類似于人的身份證，是唯一的標簽，在語法中為專一的某個標簽設置屬性，如定義<span class="nihuai">,調用的時候用#nihuai{}就可以調用這個唯一的span標簽了；
2、CSS選擇器常見的有幾種?
基礎選擇器
組合選擇器
屬性選擇器
偽類選擇器
偽元素選擇器
3、選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？
從高到低分別是：
1.在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式，作為style屬性寫在元素標簽上的內聯樣式
2.id選擇器
3.類選擇器
4.偽類選擇器
5.屬性選擇器
6.標簽選擇器
7.通配符選擇器
8.瀏覽器自定義
對于復雜場景根據排序來選擇：
ID選擇器的特殊性值，加0,1,0,0;
類選擇器、屬性選擇器或偽類，加0,0,1,0;
標簽選擇器和偽元素，加0,0,0,1;
通配選擇器對特殊性沒有貢獻，即0,0,0,0;
最后比較特殊的一個標志!important(權重)，它沒有特殊值，但是他的優先級是最高的，為了方便記憶，可認為他的默認值是1,0,0,0.
根據同級別比個數，優先級別大于后面級別，如1100>1000 1000>0300;
4、a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
四個選擇器優先級相同，考慮他們會相互覆蓋，應該按照這個順序：
a:link（未被點擊）
a:visited（已被點擊）
a:hover（鼠標懸停其上）
a:active（鼠標已經按下，還沒有釋放）
因為：
1.四個選擇器優先級相同，越往后的樣式會覆蓋前面的樣式
2.鏈接被訪問后，樣式會發生改變，所以a:visited應放在a:link之后
3.當鼠標懸停在鏈接上時，無論鏈接是否已經被訪問過，其樣式都會發生改變，所以a:hover應放在a:visited之后
4.當鼠標按下鏈接但未松開時，鏈接樣式會發生改變，但此時也屬于鼠標懸停的狀態，所以應把 a:active 放在 a:hover 之后，這樣可以覆蓋a:hover的樣式
5、以下選擇器分別是什么意思?
header{ //id名為head的選擇器
}
.header{//類名為header的選擇器
}
.header .logo{//兩個類有空格，類名為header元素下的后代為類名為log的子元素
}
.header.mobile{//沒有空格， 一個類中同時有header與mobile,如<div class="header" "mobile" "nihuai">，這個類可以賦值屬性和調用，但是<div class="header">這個值是調用不了的
}
.header p, .header h3{//有逗號表示交集選擇器，表示類名為header中的后代P元素與類名為header中的后代h3元素；
}
header .nav>li{//id名為header下后代中類名為nav的直接第一后代中的li元素
}
header a:hover{ //id名為header下后代中a元素的偽類（鼠標浮動在上面的時候）
}
header .logo~p{ //id名為header下的后代中類名為logo元素的所有同級p標簽
}
header input[type="text"]{ //id名為header下的后代中input 中type類型為text的元素
}
列出你知道的偽類選擇器：
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區別 （注意空格的作用）
div:first-child //沒有空格，表示div下的第一個孩子的所有元素
div :first-child//有空格，表示 所有div后代中 直系的第一個孩子
div:first-of-type 所有div元素內所有元素中屬于其父元素的首個子元素
div :first-of-type所有div元素內所有元素中屬于其父元素的首個類型的子元素
運行如下代碼，解析下輸出樣式的原因。
<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>
http://js.jirengu.com/ciyijokali/1/edit
