class 和 id 的使用場(chǎng)景?

• class用于指定元素屬于哪一種樣式的類
• id屬性用于定義一個(gè)元素的獨(dú)特的樣式

class是一個(gè)樣式，先定義好， 然后可以套給多個(gè)結(jié)構(gòu)/內(nèi)容, 便于復(fù)用。也就是說class名稱可以相同。
id是一個(gè)標(biāo)簽，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容，就象你的名字， 如果一個(gè)屋子有2個(gè)人同名，就會(huì)出現(xiàn)混淆；id是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式；
傳送門

CSS選擇器常見的有幾種?

1. 基礎(chǔ)選擇器

• 通用選擇器
• id選擇器
• 類選擇器
• 標(biāo)簽選擇器

2. 組合選擇器

• 多元素選擇器
• 后代選擇器
• 子元素選擇器
• 直接相鄰選擇器
• 普通相鄰選擇器
• .class1.class2（沒用分隔符時(shí)，.和#可作為分隔符元素）
• element#id（沒用分隔符時(shí)，.和#可作為分隔符元素）

3. 屬性選擇器

• E[attr] 匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div
• E[attr = value]
• E[attr ~= value]
• E[attr ^= value]
• E[attr $= value]
• E[attr *= value]

4. 偽類選擇器

• E:first-child 匹配元素E的第一個(gè)子元素
• E:link 匹配所有未被點(diǎn)擊的鏈接
• E:visited 匹配所有已被點(diǎn)擊的鏈接
• E:active 匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素
• E:hover 匹配鼠標(biāo)懸停其上的E元素
• E:focus 匹配獲得當(dāng)前焦點(diǎn)的E元素
• E:lang(c) 匹配lang屬性等于c的E元素
• E:enabled 匹配表單中可用的元素
• E:disabled 匹配表單中禁用的元素
• E:checked 匹配表單中被選中的radio或checkbox元素
• E::selection 匹配用戶當(dāng)前選中的元素（兩個(gè)冒號(hào)是CSS3寫法，一個(gè)是CSS2寫法）

5. 偽元素選擇器

• E:root 匹配文檔的根元素，對(duì)于HTML文檔，就是HTML元素
• E:nth-child(n) 匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1
• E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為1
• E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素
• E:nth-last-of-type(n) 與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素
• E:last-child 匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1)
• E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于:nth-of-type(1)
• E:last-of-type 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1)
• E:only-child 匹配父元素下僅有的一個(gè)子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
• E:only-of-type 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
• E:empty 匹配一個(gè)不包含任何子元素的元素，文本節(jié)點(diǎn)也被看作子元素
• E:not(selector) 匹配不符合當(dāng)前選擇器的任何元素

選擇器的優(yōu)先級(jí)是怎樣的?

一般順序?yàn)椋?code>!important>內(nèi)聯(lián)樣式>類選擇器>偽類選擇器>屬性選擇器>標(biāo)簽選擇器>通配符選擇器>瀏覽器自定義

對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)？

首先，當(dāng)有!important出現(xiàn)時(shí)，無論是什么樣式優(yōu)先級(jí)最高。其次再算每個(gè)復(fù)雜選擇器里出現(xiàn)了多少個(gè)子選擇器，并且給子選擇器分類，再按照上方的優(yōu)先級(jí)去做順序排列，舉例：

• 當(dāng)兩個(gè)復(fù)雜選擇器中，第一個(gè)中有1個(gè)id選擇器1個(gè)類選擇器，第二個(gè)有1個(gè)類選擇器1個(gè)標(biāo)簽選擇器，那么第一個(gè)優(yōu)先級(jí)最高
• 當(dāng)兩個(gè)復(fù)雜選擇器中，第一個(gè)有1個(gè)類選擇器，第二有2個(gè)類選擇器，那么d優(yōu)先級(jí)第二個(gè)優(yōu)先級(jí)最高
• 當(dāng)兩個(gè)復(fù)雜選擇器一樣，那么哪個(gè)寫在最后誰優(yōu)先級(jí)最高

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

• :link選擇器對(duì)指向未被訪問頁面的鏈接設(shè)置樣式

• :hover選擇器用于設(shè)置鼠標(biāo)指針浮動(dòng)到鏈接上時(shí)的樣式

• :active選擇器用于選擇活動(dòng)鏈接。當(dāng)在點(diǎn)擊一個(gè)鏈接時(shí)，它就會(huì)成為活動(dòng)的（激活的）

• :visited選擇器 用于設(shè)置指向已訪問頁面的鏈接

原因：

1. 同級(jí)選擇器，排在最下面的會(huì)覆蓋上面的選擇器
2. 未訪問鏈接時(shí)，a:link會(huì)顯示出來，當(dāng)鼠標(biāo)浮動(dòng)在鏈接上時(shí)想要a:hover顯示出來，a:hover應(yīng)該排在a:link下面
3. 當(dāng)訪問過鏈接后，想要鼠標(biāo)浮動(dòng)在鏈接上時(shí)a:hover效果也會(huì)顯示，a:hover也應(yīng)該在a:visited下面
4. 當(dāng)點(diǎn)擊鏈接時(shí)a:active效果會(huì)顯示，并且無論是訪問過或未訪問過的鏈接，點(diǎn)擊時(shí)都要顯示a:active的效果，因此a:active優(yōu)先級(jí)最高

綜上所述，優(yōu)先級(jí)順序應(yīng)該為：a:link>a:visited>a:hover>a:active

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

• #header{}id選擇器，選擇id值為header的元素
• .header{}class選擇器，選擇class值為header的元素
• .header .logo{}后代選擇器，class為header的子元素中 class為logo的元素
• .header.mobile{}class中同時(shí)包含header和mobile的元素
• .header p, .header h3{}class值為header元素后代中的p和h3元素
• #header .nav>li{}id值為header元素后代中class值為nav元素中所有的li元素

#header a:hover{}id值為header元素后代中鼠標(biāo)懸停其上的a元素

#header .logo~p{}d值為header元素后代中class值為logo元素之后的同級(jí)p元素

#header input[type="text"]{}d值為header元素后代中type屬性為”text"的input元素

列出你知道的偽類選擇器

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

• div:first-child div元素下的第一個(gè)子元素
• div:first-of-type父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于:nth-of-type(1)

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

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

• .item1:first-child 選擇的是item1下的第一個(gè)子元素aa字體為紅色
• .item1:first-of-type 選擇是item1下的子元素中同一標(biāo)簽下的第一個(gè)元素，因此選擇了aa和bb背景為藍(lán)色

輸出結(jié)果如下

輸出結(jié)果