１.class 和 id 的使用場景?####

class是類選擇器，選擇的是同一個類的元素；id選擇器選擇的是有某一id的元素，因為id是各不相同的所以選擇的元素是唯一的。

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

1.基礎選擇器#####

• *　通用元素選擇器，匹配頁面任何元素（這也就決定了我們很少使用）
• ＃id　id選擇器，匹配特定id的元素
• .class 類選擇器，匹配class包含(不是等于)特定類的元素
• element 標簽選擇器

2.組合選擇器#####

• E,F 多元素選擇器，用,分隔，同時匹配元素E或元素F
• E F 后代選擇器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F
• E>F 子元素選擇器，用>分隔，匹配E元素的所有直接子元素
• E+F 直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F
• E~F 普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否）
• .class1.class2 id和class選擇器和選擇器連寫的時候中間沒有分隔符，．和 # 本身充當分隔符的元素
• element#id id和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當分隔符的元素

3.屬性選擇器#####

• E[attr]匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div
• E[attr = value]匹配屬性attr值為value的元素，div[id=test],匹配id=test的div
• E[attr ~= value]匹配所有屬性attr具有多個空格分隔、其中一個值等于value的元素
• E[attr ^= value]匹配屬性attr的值以value開頭的元素
• E[attr $= value]匹配屬性attr的值以value結尾的元素
• E[attr *= value]匹配屬性attr的值包含value的元素

4.偽類選擇器#####

E:first-child匹配作為長子（第一個子女）的元素E
E:link匹配所有未被點擊的鏈接
E:visited匹配所有已被點擊的鏈接
E-active匹配鼠標已經其上按下、還沒有釋放的E元素
E:hover匹配鼠標懸停其上的E元素
E:focus匹配獲得當前焦點的E元素
E:lang(c)匹配lang屬性等于c的E元素
E:enabled匹配表單中可用的元素
E:disabled匹配表單中禁用的元素
E:checked匹配表單中被選中的radio或checkbox元素
E::selection匹配用戶當前選中的元素
E:root匹配文檔的根元素，對于HTML文檔，就是HTML元素
E:nth-child(n)匹配其父元素的第n個子元素，第一個編號為1
E:nth-last-child(n)匹配其父元素的倒數第n個子元素，第一個編號為1
E:nth-of-type(n)與:nth-child()作用類似，但是僅匹配使用同種標簽的元素
E:nth-last-of-type(n)與:nth-last-child() 作用類似，但是僅匹配使用同種標簽的元素
E:last-child匹配父元素的最后一個子元素，等同于:nth-last-child(1)
E:first-of-type匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)
E:last-of-type匹配父元素下使用同種標簽的最后一個子元素，等同于:nth-last-of-type(1)
E:only-child匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type匹配父元素下使用同種標簽的唯一一個子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty匹配一個不包含任何子元素的元素，文本節點也被看作子元素
E:not(selector) 匹配不符合當前選擇器的任何元素

5.偽元素選擇器#####

• E::first-line 匹配E元素內容的第一行
• E::first-letter 匹配E元素內容的第一個字母
• E::before 在E元素之前插入生成的內容
• E::after 在E元素之后插入生成的內容

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

從高到低為：
1.在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
2.作為style屬性寫在元素標簽上的內聯樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標簽選擇器
8.通配符選擇器
9.瀏覽器自定義
復雜情況下記行內樣式為 a，ID 選擇器為b，類、屬性選擇器和偽類選擇器為c，標簽選擇器、偽元素為 d。統計各類選擇器個數，先比較a的大小，a大的優先級高;如果a相等，再比較b的大小，b大的優先級高；如果b相等，比較c的大小，c大的優先級高；如果c相等，比較d的大小，d大的優先級高。

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

a:link，a:visited，a:hover，a:active。它們優先級相同，瀏覽器解釋時遵循“就近原則”后面會覆蓋前面的。一般相同元素有針對不同條件的定義，宜將最一般的條件放在最上面，并依次向下，保證最下面的是最特殊的條件。這樣，瀏覽器在顯示元素時，才會從特殊到一般、逐級向上驗證條件，才會使每一個CSS語句都起到效果。

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

＃header{ }id為header的元素
.header{ }class為header的元素
.header .logo{ }class為header的元素的后代元素中class為logo的元素
.header.mobile{ }class同時包含header和mobil的元素
.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的元素的后代元素中type為text的input標簽

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

E:first-child匹配作為長子（第一個子女）的元素E
E:link匹配所有未被點擊的鏈接
E:visited匹配所有已被點擊的鏈接
E-active匹配鼠標已經其上按下、還沒有釋放的E元素
E:hover匹配鼠標懸停其上的E元素
E:focus匹配獲得當前焦點的E元素
E:lang(c)匹配lang屬性等于c的E元素
E:enabled匹配表單中可用的元素
E:disabled匹配表單中禁用的元素
E:checked匹配表單中被選中的radio或checkbox元素
E::selection匹配用戶當前選中的元素

7.div:first-child和div:first-of-type的作用和區別####

first-child匹配父元素的第一個子元素；first-of-type匹配父元素下有相同類型標簽的第一個元素。

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

<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>

1.png

class為item1的有aa,bb,ccc,其中第一個子元素為aa,設置第一個子元素的顏色為紅色，所以aa為紅色。
設置class為item1的子元素中有同類標簽的第一個元素的背景為藍色，有p標簽的第一個子元素為aa，有h3標簽的第一個子元素為bb,所以aa和bb的背景為藍色。