1. class 和 id 的使用場景?
對于CSS而言，id和class都是選擇器。
1. ID具有唯一性，Class具有普遍性。
2. ID是唯一的，所以盡量在結構外圍使用，通常用于頁面布局。
3. Class是可重復的，所以盡量在結構內部使用，通常用于樣式定義。
4. ID的樣式優先級高于Class。
2. CSS選擇器常見的有幾種?
CSS常用幾種選擇器有：ID選擇器，類選擇器，元素選擇器，子選擇器，后代選擇器，偽類選擇器，屬性選擇器等。這些選擇器的常用表示方式是：
ID選擇器：#container {}
類選擇器：.box{}
元素選擇器：p {}
子選擇器：ul > li {}
后代選擇器：div p {}
偽類選擇器：a:visited {}
屬性選擇器：input[type="text"] {}
3. 選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？
在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
作為style屬性寫在元素內的樣式
id選擇器
類選擇器
標簽選擇器
通配符選擇器
瀏覽器自定義或繼承
分4個等級的定義如下：
第一等：代表內聯樣式，如: style=””，權值為1000。
第二等：代表ID選擇器，如：#content，權值為100。
第三等：代表類，偽類和屬性選擇器，如.content，權值為10。
第四等：代表類型選擇器和偽元素選擇器，如div p，權值為1。
4. a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
link:連接平常的狀態 active:連接被按下的時候 visited:連接被訪問過之后 hover:鼠標放到連接上的時候
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同時包含header和mobile的元素
.header p, .header h3{ } class為header元素中的p標簽和h3標簽
#header .nav>li{ } id為header的class為nav元素的直接子元素為li的標簽
#header a:hover{ } id為header元素中的a標簽的hover狀態
#header .logo~p{ } id為header下 class為logo標簽之后所有的p標簽
#header input[type=“text”]{ } id為header的后代中，input標簽中，屬性type的值為"text"的元素集合
6. 列出你知道的偽類和偽元素
偽類選擇器
:first-child 選擇元素的第一個子元素
:link 指示作為超鏈接（即有一個href屬性）并指向一個未訪問地址的所有錨
:visited 指示作為已訪問地址超鏈接的所有的錨
:hover 指示鼠標指針停留在那個元素上
:active 指示被用戶輸入激活的元素
:focus 可以接受鍵盤輸入或者能以某種方式激活的元素
:lang() 根據元素的語言來選擇
CSS3新增:
E:not(s) 匹配不含有s選擇符的元素E
E:root 匹配E元素在文檔的根元素
E:last-child 匹配父元素的最后一個子元素E
E:only-child 匹配父元素僅有的一個子元素E
E:nth-child(n) 匹配父元素的第n個子元素E
E:nth-last-child(n) 匹配父元素的倒數第n個子元素E
E:first-of-type 匹配同類型中的第一個同級兄弟元素E
E:last-of-type 匹配同類型中的最后一個同級兄弟元素E
E:only-of-type 匹配同類型中的唯一的一個同級兄弟元素E
E:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素E
E:nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素E
E:empty 匹配沒有任何子元素（包括text節點）的元素E
E:checked 匹配用戶界面上處于選中狀態的元素E。(用于input type為radio與checkbox時)
E:enabled 匹配用戶界面上處于可用狀態的元素E
E:disabled 匹配用戶界面上處于禁用狀態的元素E
E:target 匹配相關URL指向的E元素
:first-child、:link和:visited是靜態偽類，:focus、:hover和:active是動態偽類
結合偽類: 如: a:link:hover = a:hover:link 順序并不重要，但是不要把互斥的偽類結合在一起使用。如 a:link:vistited沒有任何意義
偽元素
:first-letter 設置首字母樣式
:first-line 設置第一行樣式
:before 設置之前
:after 設置之后
CSS3新增:
::placeholder
::selection
在CSS3中為了和偽類進行區分，寫法為::first-letter、::first-line、::first-line、::first-line
:first-letter和:first-line 使用都是有限制的。另外，所有偽元素都必須放在出現該偽元素的選擇器的最后面。
7. div:first-child和div:first-of-type的作用和區別
:first-child選擇器是css2中定義的選擇器，從字面意思上來看也很好理解，就是第一個子元素
<div>
<p>第一個子元素</p>
<h2>第二個子元素</h2>
<span>第三個子元素</span>
<span>第四個子元素</span>
</div>
p:first-child 匹配到的是p元素,因為p元素是div的第一個子元素；
h1:first-child 匹配不到任何元素，因為在這里h1是div的第二個子元素，而不是第一個；
span:first-child 匹配不到任何元素，因為在這里兩個span元素都不是div的第一個子元素；
:first-child 匹配到的是p元素,因為在這里div的第一個子元素就是p。
在css3中又定義了:first-of-type這個選擇器
<div>
<p>第一個子元素</p>
<h2>第二個子元素</h2>
<span>第三個子元素</span>
<span>第四個子元素</span>
</div>
p:first-of-type 匹配到的是p元素,因為p是div的所有為p的子元素中的第一個，事實上這里也只有一個為p的子元素；
h1:first-of-type 匹配到的是h1元素，因為h1是div的所有為h1的子元素中的第一個，事實上這里也只有一個為h1的子元素；
span:first-of-type 匹配到的是第三個子元素span。這里div有兩個為span的子元素，匹配到的是第一個。
:first-of-type 匹配到的是p元素
所以
:first-child 匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素。
:first-of-type 匹配的是該類型的第一個，類型是指什么呢，就是冒號前面匹配到的東西，比如 p:first-of-type，就是指所有p元素中的第一個。這里不再限制是第一個子元素了，只要是該類型元素的第一個就行了，當然這些元素的范圍都是屬于同一級的，也就是同輩的
