問(wèn)題1. class 和 id 的使用場(chǎng)景?

class 常用于多個(gè)標(biāo)簽統(tǒng)一進(jìn)行樣式適配，在 CSS 文件中以 .xxx{} 進(jìn)行樣式調(diào)試；
id 在一個(gè) HTML 頁(yè)面中只為一個(gè)標(biāo)簽單獨(dú)使用，僅對(duì)這個(gè)標(biāo)簽有效，在 CSS 文件中以#xxx{} 進(jìn)行樣式調(diào)試。

問(wèn)題2. CSS選擇器常見(jiàn)的有幾種?

基礎(chǔ)選擇器/組合選擇器/屬性選擇器/偽類選擇器/偽元素選擇器

問(wèn)題3. 選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)？

優(yōu)先級(jí)從高到低分別是

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

應(yīng)對(duì)復(fù)雜場(chǎng)景

1. 面對(duì)兩條復(fù)雜的 CSS 組合選擇器之間進(jìn)行權(quán)重選擇，我們將這兩條組合選擇器中的各個(gè)選擇器都挑出來(lái)，按照上表選擇器分類并進(jìn)行相對(duì)應(yīng)的標(biāo)識(shí)。
2. 然后由標(biāo)識(shí) a 到 b 比較兩條復(fù)雜組合選擇器各自擁有上述各標(biāo)識(shí)選擇器分類的多少，如果一條復(fù)雜選擇器擁有 a 標(biāo)識(shí)數(shù)目大于另一條，則權(quán)重高于另一條，不再考慮其它標(biāo)識(shí)；如果兩者擁有 a 標(biāo)識(shí)數(shù)目相同，則再考慮 b 標(biāo)識(shí)，若一者擁有 b 標(biāo)識(shí)數(shù)目大于另一方，則權(quán)重高于另一方，不再考慮 c 和 d 標(biāo)識(shí)。
3. 以此類推，最終得出哪條復(fù)雜選擇器擁有的權(quán)重更高。

例：

#test p.class1 {...}
#test .class1.class2 {...}
//兩者對(duì)應(yīng)同一元素，元素聽(tīng)誰(shuí)的？

解：

由該表可知，標(biāo)識(shí) a 和 b 兩條復(fù)雜選擇器擁有數(shù)目相同，而標(biāo)識(shí) c 第二行擁有數(shù)高于第一行，因此第二行的權(quán)重高于第一行。

問(wèn)題4. a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？

<style type="text/css">
    a {
        color: red;
    }
    a:visited { //小心順序
        color: black;
    }
    a:hover {
        color: blue;
    }
    a:active {
        color: yellow;
    }
</style>

順序是 a:link -> a:visited -> a:hover -> a:active，如果不按照這個(gè)順序，則可能出現(xiàn)屬性被相互覆蓋而無(wú)法獲得想要得到的效果。

問(wèn)題5.以下選擇器分別是什么意思?

#header{
} //選取 Class 為 header 的元素

.header{
} //選取 ID 為 header 的元素

.header .logo{
} //選取 ID 為 header 的所有 ID 為 logo 的后代；

.header.mobile{
} //選取 Class 中同時(shí)包含 header 和 mobile 的元素；

.header p, .header h3{
} //選取 Class 中包含 header 的 p 標(biāo)簽和 h3 標(biāo)簽

#header .nav>li{
} //選取 Class 包含 header 的 ID 為 nav 的后代元素的所有標(biāo)簽為 li 的直接子元素

#header a:hover{
} //選取 Class 包含 header 的所有標(biāo)簽為 a :hover 后代元素

#header .logo~p{
} //選取 Class 包含 header 的 ID 為 logo 的子元素之后的同級(jí)標(biāo)簽為 p 的元素

#header input[type="text"]{
} //選取 Class 包含 header 的后代元素中標(biāo)簽為 input 同時(shí) type="text"的元素

列出你知道的偽類選擇器

div:first-child 和 div:first-of-type 的作用和區(qū)別

div:first-child：匹配其父元素的第一個(gè)子元素，其選取了所有 div 標(biāo)簽的父元素的第一個(gè)子元素。
div:first-of-type：匹配其父元素第一個(gè)使用同種標(biāo)簽的子元素，其選取了所有 div 標(biāo)簽的父元素的第一個(gè)也是 div 標(biāo)簽的子元素。

運(yùn)行如下代碼，解析下輸出樣式的原因

<style>
    .item1:first-child{
      color: red;
    } //該選擇器選擇了所有 Class 為 item1 的父元素的第一個(gè)子元素
    .item1:first-of-type{
      background: blue;
    } //該選擇器選擇了所有 Class 為 item1 的元素（標(biāo)識(shí) A）的父元素的第一個(gè)標(biāo)簽與 A 元素相同的子元素
</style>

 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>

CSS 中的第一個(gè)選擇器選擇了所有 Class 為 item1 的父元素的第一個(gè)子元素，三個(gè) Class 為 item1 的元素的父元素都是<div class="ct">，其第一個(gè)子元素為<p class="item1">aa</p>，故 aa 顯示為紅色。

CSS 中的第二個(gè)選擇器選擇了所有 Class 為 item1 的元素（標(biāo)識(shí) A）的父元素的第一個(gè)標(biāo)簽與 A 元素相同的子元素，<p class="item1">aa</p>父元素的第一個(gè)標(biāo)簽為 p 的子元素即是其自身，<h3 class="item1">bb</h3> 和 <h3 class="item1">ccc</h3>的父元素的第一個(gè)標(biāo)簽為 h3 的子元素為<h3 class="item1">bb</h3>，故而 aa 和 ccc 的背景顏色為藍(lán)色。