class和id的使用場景？
class選擇器：又叫做類選擇器，即給多個(gè)元素添加相同樣式時(shí)，使用class選擇器
id選擇器：給一個(gè)單獨(dú)的元素添加樣式時(shí)知纷，使用ID選擇器
CSS選擇器常見的有幾種？
基礎(chǔ)選擇器：
1.標(biāo)簽選擇器 2.類選擇器（class） 3.ID選擇器 4.全局選擇器（*）
鏈接偽類選擇器：
1.未訪問(:link) 2.已訪問(:visited) 3.鼠標(biāo)懸停(:hover) 4.激活(:active)
其他偽類選擇器：
- :first-child 相對(duì)于父元素的第一個(gè)子元素
- :focus 用戶正在使用的元素（類似于表單中陵霉，正在填寫哪個(gè)文本域）
- :lang(c) 元素中l(wèi)ang屬性為c的元素
- :enabled 表單中可以使用的元素
- :disabled 表單中被禁用的元素
- :checked 表單中radio或者checkbox被選選中的元素
- ::selection 用戶當(dāng)前選中的元素
組合選擇器：
- 群組選擇器 同時(shí)給多個(gè)選擇器添加樣式琅轧，每個(gè)選擇器之間用","隔開
- 后代選擇器 給某個(gè)元素的某個(gè)子元素添加樣式，用空格隔開
- 子元素選擇器 給a元素下一級(jí)所有的b元素添加樣式（只包含a元素的下一級(jí)的所有b元素踊挠，而不是a元素下所有的b元素）
- 直接相鄰選擇器 a+b 匹配a元素之后的相鄰的同級(jí)b元素
- 普通相鄰選擇器 a～b 匹配a元素之后的所有同級(jí)b元素（不論相鄰否）
其他選擇器詳解鏈接
選擇器的優(yōu)先級(jí)是怎樣的乍桂？對(duì)于復(fù)雜場景如何計(jì)算優(yōu)先級(jí)？
簡單情況下
復(fù)雜情況下：如下圖所示效床，首先計(jì)算a,b,c,d的數(shù)值睹酌，有a的情況下，不看b,c,d剩檀，只比較a的大小憋沿。有b的情況下，不看c,d沪猴，只看b的大小辐啄。同理依次往下（a>b>c>d）
a:link,a:hover,a:active,a:visited的順序是怎么樣的？為什么运嗜？
a:link>a:visited>a:hover>a:active
這4個(gè)偽類屬于同一級(jí)別壶辜，所以后寫的會(huì)覆蓋先寫的樣式。故當(dāng)a:link必須第一個(gè)寫担租，這樣當(dāng)鏈接出去其他狀態(tài)時(shí)砸民，a:link會(huì)被覆蓋。對(duì)于a:hover和a:active和a:visited奋救，當(dāng)鼠標(biāo)點(diǎn)擊鏈接時(shí)的那一刻岭参，鏈接處于3種狀態(tài)，但需要顯示a:active樣式尝艘，所以a:active放在最后一個(gè)寫演侯。當(dāng)鼠標(biāo)點(diǎn)擊鏈接之后，鼠標(biāo)懸停鏈接利耍，要顯示a:hover樣式蚌本，所以a:hover在a:visited之后。
以下選擇器分別是什么意思隘梨？
- (#header{})
給id為header的元素書寫樣式 - (.header{})
給class為header的元素書寫樣式 - (.header .logo{})
給class為header的元素的子元素中class為logo的元素書寫樣式 - (.header.mobile{})
給class為header的元素的子元素中class為mobile的元素書寫樣式 - (.header p, .header h3{})
同時(shí)給class為header的元素的子元素中p標(biāo)簽和class為header的元素的子元素h3標(biāo)簽書寫樣式 - (#header .nav>li{})
給id為header的元素的子元素中class為nav元素的下一級(jí)子元素為li的標(biāo)簽書寫樣式 - (#header a:hover{})
給id為header的元素的子元素中a標(biāo)簽懸停狀態(tài)時(shí)書寫樣式 - (#header .logo~p{})
給id為header的元素的子元素中所有class為logo以下的同級(jí)p標(biāo)簽書寫樣式 - (#header input[type="text"]{})
給id為header的元素的子元素中type屬性為text的input標(biāo)簽書寫樣式
列出你知道的偽類選擇器
div:fitst-child,div:first-of-type,div: first-child和div: first-of-type的作用和區(qū)別
- div:first-child：匹配div父元素下第一個(gè)子元素是div的元素
- div:first-of-type：匹配div父元素下第一個(gè)div元素
- div: first-child：匹配所有div所有子元素中相對(duì)于父元素是第一個(gè)子元素
- div: first-of-type：匹配所有div所有子元素中相對(duì)于父元素是第一次使用的標(biāo)簽
運(yùn)行如下代碼程癌，解析下輸出樣式的原因
因?yàn)?item:first-child{color:red;}匹配的是.item1父元素.ct下第一個(gè)子元素同時(shí)class為item的元素，故aa顯示為紅色轴猎。.item:first-of-type{background-color:blue;}匹配的是同種標(biāo)簽中第一個(gè)此類標(biāo)簽同時(shí)class為item的元素嵌莉，故bb和ccc的背景顏色為藍(lán)色。
