1.class 和 id 的使用場景?

兩者都能選取DOM節(jié)點(diǎn)并給DOM節(jié)點(diǎn)添加樣式洗显，但是W3C標(biāo)準(zhǔn)里規(guī)定頁面中只能存在的ID選擇器數(shù)量<=1,所以在操作DOM元素添加樣式時(shí)盡量使用class選擇器酥筝。
ID選擇器由于它的唯一性，通常都是配合JavaScript使用眶痰。

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

基本選擇器
'*' 通用元素選擇器橘券，匹配頁面任何元素（這也就決定了我們很少使用）
id id選擇器累榜，匹配特定id的元素
.class 類選擇器，匹配class包含(不是等于)特定類的元素
element 標(biāo)簽選擇器
組合選擇器
E,F 多元素選擇器富弦，用,分隔沟娱，同時(shí)匹配元素E或元素F
E F 后代選擇器，用空格分隔腕柜，匹配E元素所有的后代（不* 只是子元素济似、子元素向下遞歸）元素F
E>F 子元素選擇器矫废，用>分隔，匹配E元素的所有直接子元素
E+F 直接相鄰選擇器砰蠢，匹配E元素之后的相鄰的同級元素F
E~F 普通相鄰選擇器（弟弟選擇器）蓖扑，匹配E元素之后的同級元素F（無論直接相鄰與否）
.class1.class2 id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符，. 和 # 本身充當(dāng)分隔符的元素
element#id id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符台舱，. 和 # 本身充當(dāng)分隔符的元素
屬性選擇器
E[attr] 匹配所有具有屬性attr的元素律杠，div[id]就能取到所有有id屬性的div
E[attr = value] 匹配屬性attr值為value的元素，div[id=test],匹配id=test的div
E[attr ~= value] 匹配所有屬性attr具有多個(gè)空格分隔竞惋、其中一個(gè)值等于value的元素
E[attr ^= value] 匹配屬性attr的值以value開頭的元素
E[attr $= value] 匹配屬性attr的值以value結(jié)尾的元素
E[attr *= value] 匹配屬性attr的值包含value的元素
偽類選擇器
E:first-child 匹配作為長子（第一個(gè)子女）的元素E
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)前選中的元素
E:root 匹配文檔的根元素，對于HTML文檔碰声，就是HTML元素
E:nth-child(n) 匹配其父元素的第n個(gè)子元素诡蜓，第一個(gè)編號為1
E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號為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)前選擇器的任何元素
N的取值(當(dāng)使用n作為系數(shù)時(shí)，可以為0盖矫，不是系數(shù)時(shí)只能從1開始)
1丽惭，2，3辈双，4责掏，5
2n+1, 2n, 4n-1
odd, even
偽元素選擇器
E::first-line 匹配E元素內(nèi)容的第一行
E::first-letter 匹配E元素內(nèi)容的第一個(gè)字母
E::before 在E元素之前插入生成的內(nèi)容
E::after 在E元素之后插入生成的內(nèi)容

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

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

4.a:link, a:hover, a:active, a:visited 的順序是怎樣的湃望？ 為什么换衬？
a標(biāo)簽偽元素順序.png

根據(jù)瀏覽器從上到下執(zhí)行代碼順序決定
如果將a:visited放在最后一位，則表示只要該鏈接被點(diǎn)擊后证芭，優(yōu)先級將高于所有的偽類瞳浦，會(huì)將上面3個(gè)偽類屬性覆蓋，所以要放在第二位废士。
a:active放在最后一位是因?yàn)樗菍儆谑髽?biāo)已經(jīng)其上按下叫潦、但還沒有釋放的操作，如果位置和a:hover對調(diào)位置官硝，它將被a:hover覆蓋掉矗蕊。

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

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

E:first-child 匹配作為長子（第一個(gè)子女）的元素E
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)前選中的元素
E:root 匹配文檔的根元素，對于HTML文檔拔妥，就是HTML元素
E:nth-child(n) 匹配其父元素的第n個(gè)子元素忿危，第一個(gè)編號為1
E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號為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)前選擇器的任何元素

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

div:first-child 匹配div標(biāo)簽的父元素下的第一個(gè)div子元素
div:first-of-type 匹配div標(biāo)簽的父元素下的第一個(gè)div子元素

區(qū)別：

:first-child 匹配的是某父元素的第一個(gè)子元素，可以說是結(jié)構(gòu)上的第一個(gè)子元素溪王。
:first-of-type 匹配的是該類型的第一個(gè)腮鞍，類型是指什么呢，就是冒號前面匹配到的東西莹菱，比如 p:first-of-type移国，就是指所有p元素中的第一個(gè)。這里不再限制是第一個(gè)子元素了道伟，只要是該類型元素的第一個(gè)就行了迹缀，當(dāng)然這些元素的范圍都是屬于同一級的，也就是同輩的蜜徽。
8.運(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{ color: red;}
指定父元素中第一個(gè)類名為item1的元素的字體顏色為紅色
.item1:first-of-type{ background: blue;}
父元素中每一類元素的第一個(gè)類名為item1的元素的背景色為藍(lán)色拘鞋，
（div中有p砚蓬、h3兩類標(biāo)簽，每一類的第一個(gè)類名為item1的元素背景變?yōu)樗{(lán)色掐禁，所以：內(nèi)容為aa和bb被選中變?yōu)樗{(lán)色