1. class 和 id 的使用場景?

class適用于類選擇器捺疼，設(shè)置元素的class屬性疏虫，為元素指定類名。多個(gè)元素可以擁有同一個(gè)類名帅涂。在CSS中议薪，以.開頭。
id適用于ID選擇器媳友，設(shè)置元素的id屬性斯议，每個(gè)id在文檔中必須是唯一的。在CSS中醇锚，以#開頭哼御。ID選擇器比類選擇器的優(yōu)先度更高。

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

基礎(chǔ)選擇器

組合選擇器

屬性選擇器

偽類選擇器

偽元素選擇器

3. 選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計(jì)算優(yōu)先級供置？

1. 屬性后面使用!important的優(yōu)先級最高
2. 內(nèi)聯(lián)樣式
3. id選擇器
4. 類選擇器
5. 偽類選擇器
6. 屬性選擇器
7. 標(biāo)簽選擇器
8. 通配符選擇器
9. 瀏覽器自定義

通過逐級的對比選擇器來確定優(yōu)先級谨湘。如：

  /*.class1屬于類選擇器優(yōu)先級高于p標(biāo)簽選擇器绽快，所以下面的優(yōu)先級高于上面的*/
  #test p.class1 {}
  #test .class1.class2 { }

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

a:link>a:visited>a:hover>a:active坊罢。
a:visited一定要放在a:link之后，這樣才能保證訪問過的樣式具有a:visited樣式擅耽。a:hover要放在a:link和a:visited之后活孩，這樣才不會被覆蓋。而a:active要放在最后乖仇，因?yàn)楫?dāng)鼠標(biāo)點(diǎn)擊時(shí)會先觸發(fā)a:hover憾儒。總結(jié)一下乃沙，就是事件觸發(fā)的先后順序起趾。
由于偽類的選擇器優(yōu)先級一致，后面的a鏈接樣式會覆蓋前面的警儒。
記憶方法 LVHA, love and hate

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

    #header{
    /*id選擇器训裆，匹配id是header的元素*/
    }
    .header{
    /*類選擇器，匹配class是header的元素*/
    }
    .header .logo{
    /*后代選擇器蜀铲，匹配class為header下class為logo的元素边琉，注意空格*/
    }
    .header.mobile{
    /*類選擇器，匹配class同時(shí)有header與mobile的元素*/
    }
    .header p, .header h3{
    /*多元素選擇器记劝，匹配class為header的元素下面变姨，標(biāo)簽為p或者為h3的元素*/
    }
    #header .nav>li{
    /*匹配id為header元素下 class為nav元素下的子元素li，不向下遞歸*/
    }
    #header a:hover{
    /*偽類選擇器厌丑，匹配id為header的元素下定欧，a標(biāo)簽的鼠標(biāo)懸浮狀態(tài) */
    }
    #header .logo~p{
    /*匹配id為header的元素下，class為logo元素后面的的同級相鄰p標(biāo)簽 */
    }
    #header input[type="text"]{
    /*匹配id為header的元素下蹄衷，input標(biāo)簽類型為text的元素*/
    }

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

7. div:first-child睦番、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）

• div:first-child 匹配div，該div是其父元素的第一個(gè)子元素
• div:first-of-type匹配div標(biāo)簽在其父元素中第一次出現(xiàn)
• div :first-child 匹配所有div下的第一個(gè)子元素
• div :first-of-type匹配 div標(biāo)簽下第一次出現(xiàn)的子元素
  空格表示后代選擇器

8. 運(yùn)行如下代碼托嚣，解析下輸出樣式的原因巩检。

    <style>
    .item1:first-child{
      /*first-child選擇class為item1在其父元素中的第一個(gè)子元素，所以aa字體顏色為紅*/
      color: red;
    }
    .item1:first-of-type{
     /*first-of-type選擇class為item1在其父元素中第一次出現(xiàn)的標(biāo)簽示启，所以p和h3標(biāo)簽背景色為藍(lán)色*/
      background: blue;
    }
    </style>
     <div class="ct">
       <p class="item1">aa</p>
       <h3 class="item1">bb</h3>
       <h3 class="item1">ccc</h3>
     </div>