class 和 id 的使用場(chǎng)景?
class 用于具有相同樣式特征的一組元素上。
id 是元素的獨(dú)一無(wú)二的名稱。
CSS選擇器常見(jiàn)的有幾種?
基本選擇器
組合選擇器
屬性選擇器：
偽類選擇器
偽元素選擇器
選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)？
依次往下優(yōu)先級(jí)降低：
！important
style內(nèi)聯(lián)樣式
id選擇器
類選擇器
偽類選擇器
屬性選擇器
標(biāo)簽選擇器
通配符選擇器
瀏覽器自定義
復(fù)雜場(chǎng)景計(jì)算方式是：
為各類元素設(shè)立優(yōu)先級(jí)，按照以下規(guī)則：
行內(nèi)樣式-a
ID選擇器-b
類、屬性選擇器、偽類選擇器 -c
標(biāo)簽選擇器、偽類選擇器-d
首先比較a的大小，a值大的優(yōu)先級(jí)高；如果a值相等，再比較b，b值大的優(yōu)先級(jí)高；依次類推，一直到d.
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
a:link
a:visited
a:hover
a:active
在CSS中，如果對(duì)同樣的元素有針對(duì)不同條件的定義，一般講最一般的條件放在最上面，最特殊的條件放在最下面。
因?yàn)椋瑸g覽器在顯示元素時(shí)，會(huì)從特殊到一般、逐級(jí)向上驗(yàn)證條件。
header 是ID選擇器
.header 是類選擇器
.header .logo 后代選擇器，中間有空格，只選擇類header下面的子元素logo
.header.mobile 中間沒(méi)有風(fēng)格符，.本身充當(dāng)分隔符
.header p,.header h3 組合選擇器，選擇類.header 下的子元素p和類.header 下的子元素h3
header .nav>li id為header元素下的子元素nav下的直接子元素li
header a:hover id為header元素下的偽類子元素a:hover
選擇id為header元素下的logo和所有p元素
選擇id為header元素下的input元素中屬性type="text"的元素
列出你知道的偽類選擇器
a:visited
a:active
a:link
a:hover
a:focus
a:disabled
a:checked
a:first-child
a:enabled
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
div:first-child 匹配div元素父元素中的第一個(gè)子元素
div:first-of-type 匹配div元素父容器下的同種類型中的第一個(gè)
.item1:first-child 匹配item1元素父容器下的類為item1的第一個(gè)子元素的顏色變?yōu)榧t色，所以aa顯示為紅色
.item1:first-of-type 匹配item1元素父容器下類為item1的同類標(biāo)簽的第一個(gè)，所以是aa,bb的背景色變藍(lán)
