1. class 和 id 的使用場景?

• id：id選擇器，使用#name定義（name為id名），使用id="name"調用，一個標簽只能有一個id且每個id只能使用一次，多用于頁面分塊的塊級標簽上；
• class：類選擇器，使用.name定義（name為類名，可任意取名），使用class="name"調用，一個標簽可以有多個類且同一個類可以用到不同的標簽上，多用于多個標簽樣式相似或完全相同時；

2. CSS選擇器常見的有幾種?

2.1 基礎選擇器

2.2 組合選擇器

2.3 屬性選擇器

2.4 偽類選擇器

N的取值
1，2，3，4，5
2n+1, 2n, 4n-1
odd, even

2.5 偽元素選擇器

3. 選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？

3.1 選擇器的優先級（權重）由高到低如下：

1. 在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
2. 作為style屬性寫在元素標簽上的內聯樣式
3. id選擇器
4. 類選擇器
5. 偽類選擇器
6. 屬性選擇器
7. 標簽選擇器
8. 通配符選擇器
9. 瀏覽器自定義

3.2 復雜場景如何計算優先級

選擇器的特殊性分為四個部分，即 a,b,c,d,各代表如下：

• 行內樣式 <div style="xxx"></div> ==> a
• ID 選擇器 ==> b
• 類，屬性選擇器和偽類選擇器 ==> c
• 標簽選擇器、偽元素 ==> d
  那么每一個CSS的聲明均可分解為a，b，c，d，四部分，權重關系a>b>c>d，如果要比較兩個聲明哪個權重高，需按a到d的順序進行依次對比，a值大的相對權重高；如果a值相同，則比較b值，此時b值大的權重高；如果b值也相同，則比較c值...
  如果選擇器相同，后定義的選擇器會覆蓋先定義的選擇器

4. a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？

順序為 a:link, a:visited a:hover, a:active,
分析原因：偽類選擇器權重相同，后定義的選擇器會覆蓋先定義的選擇器。
未點擊鏈接前，link偽類處于激活狀態，鼠標懸停（或點擊）時，a鏈接同時處于link和hover(或active)狀態，由于它們特指度相同，
在同時激活的情況下，后出現的偽類樣式會覆蓋前面的偽類樣式，故link狀態必須寫在hover(或active)之前。
　　再討論hover和active的順序，若把hover放在active后面，當點擊鏈接一瞬，實際你在激活active狀態的同時觸發了hover偽類,hover在后面覆蓋了active的顏色，所以無法看到active的顏色。故hover在active之前
　　其次，若把visited放在hover后面，那已訪問過的鏈接一直觸發著visited偽類，會覆蓋hover樣式。
　　最后，其實link、visited兩個偽類之間順序無所謂。（因為它倆不可能同時觸發，即又未訪問同時又已訪問。）

5. 以下選擇器分別是什么意思?

#header{
} /* 選中ID="header"的元素 */
.header{
} /* 選中class="header"的元素 */
.header .logo{
} /* 選中class="header"的元素的后代元素中 class="logo"的元素 */
.header.mobile{
} /* 選中class="header mobile"的元素，要求class既有header又有mobile */
.header p, .header h3{
}  /* 選中class="header"的元素的后代元素中帶有p標簽的元素，以及class="header"的元素的后代元素中帶有h3標簽的元素 */
#header .nav>li{
} /* 選中ID="header"的元素的后代元素中class="nav"的直接子元素li元素 */
#header a:hover{
} /* 選中ID="header" 的元素的后代元素中鼠標懸停其上的元素 */
#header .logo~p{
}  /* 選中ID="header"的元素的后代元素中、與class="logo"的元素同級的p元素 */
#header input[type="text"]{
} /* 選中ID="header"的元素的后代元素中、input type為text的input元素 */

6. 列出你知道的偽類選擇器

7. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區別 （注意空格的作用）

• div:first-child
  與div同級的元素中的第一個元素，且這個元素為div
• div:first-of-type
  div父元素中第一個使用div的標簽
• div :first-child
  div元素下的第一個子元素
• div :first-of-type
  div元素下所有的同類型的第一個元素

8. 運行如下代碼，解析下輸出樣式的原因

<style>
.item1:first-child{
  color: red;
} /* 選中class="iterm1"的第一個子元素，故 <p class="item1">aa</p>被選中 */
.item1:first-of-type{
  background: blue;
} /* 選中id為item1的父元素下每種類型的第一個子元素，即  <p class="item1">aa</p>和 <h3 class="item1">bb</h3>被選中，*/
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>