class 和 id 的使用場景?
答：class用于選擇一類型的元素，具有可復(fù)用性，即有class相同屬性值的元素都被選中。id用于選擇唯一id值的元素，一個頁面一個id值只能出現(xiàn)一次，一般用于特定類型的不會再出現(xiàn)的元素上。
CSS選擇器常見的有幾種?
答：1.基本選擇器：
通配符選擇器：*
元素選擇器：Element
id選擇器：#id
類選擇器：.class
2.組合選擇器：
多元素選擇器：E,F
后代選擇器：E F E元素下的F元素，包含所有后代
子代選擇器：E>F E元素下的直接子元素F
直接相鄰選擇器：E+F
普通相鄰選擇器：E~F
3. 屬性選擇器：[attr]（表示帶有以 attr 命名的屬性的元素），[attr=value]，[attr~=value]，[attr|=value]，[attr^=value]，[attr$=value]，[attr*=value]
4.偽類選擇器：根據(jù)用途分類的偽類選擇器總結(jié)為：
1)，狀態(tài)：E:link,E:visited,E:active,E:focus,E:hover
2)，結(jié)構(gòu)化：E:not,E:first-child,E:last-child,E:first-of-type,E:last-of-type,E:nth-type,E:nth-last-child E:nth-of-type,E:nth-last-type,E:only-child,E:only-of-type,E:target
3)，表單相關(guān)：checked，default，disabled，empty，enabled，in-range。
5.偽元素選擇器：::before, ::after, ::first-letter, ::first-line, selection。
選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計算優(yōu)先級？
答：!important>內(nèi)聯(lián)樣式>id>class>偽類>屬性>標(biāo)簽>通配符>瀏覽器默認(rèn)。對于復(fù)雜場景，將內(nèi)聯(lián)樣式權(quán)重定義為a，id定義為b，class，偽類和屬性定位為c，偽元素，標(biāo)簽定義為d，先比較a的大小，相同則繼續(xù)比較后面的值。
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
答：a:link, a:visited, a:hover, a:active, a:link為永久生效，故應(yīng)放在hover和active前面，這樣active和hover生效時可以覆蓋link。同理鼠標(biāo)放在鏈接上hover生效，按下不松開，active生效，故active在hover后面，能覆蓋hover。點(diǎn)擊鏈接后，visited永久生效，故hover和active應(yīng)在visited后面，鼠標(biāo)再次放在鏈接上時，樣式能覆蓋visited。
以下選擇器分別是什么意思?
答：header{}：選中id為header的元素
.header{}：選中class為header的所有元素
.header .logo{}：選中class為header的元素下class為logo的所有后代元素
.header.mobile{}：選中同時擁有class屬性為header和logo值的元素
.header p, .header h3{}：選中class為header的元素下的所有p標(biāo)簽和h3標(biāo)簽元素。
header .nav>li{}：選中id為header的元素下的class為nav的元素的子元素中l(wèi)i標(biāo)簽
header a:hover{}：選中id為header的元素下的a標(biāo)簽元素鼠標(biāo)放在上面的狀態(tài)
header .logo~p{}：選中id為header的元素下的class為logo的元素的后面的擁有共同父元素的p標(biāo)簽兄弟元素
header input[type="text"]{}：id為header的元素下的input標(biāo)簽中type為text的元素。
列出你知道的偽類選擇器
答：E:link,E:visited,E:active,E:focus,E:hover,E:not,E:first-child,E:last-child,E:first-of-type,E:last-of-type,E:nth-type,E:nth-last-child E:nth-of-type,E:nth-last-type,E:only-child,E:only-of-type,E:target,checked，default，disabled，empty，enabled，in-range
div:first-child和div:first-of-type的作用和區(qū)別?
答：div:first-child：匹配父元素的第一個子元素，div:first-of-type：匹配其父元素的第一個特定類型的第一個子元素，可以匹配好幾個，如第一個li元素和第一個span元素。
運(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;}選中的是class為item1的元素的父元素的第一個子元素，即 <p class="item1">aa</p>元素，字體樣式為紅色。.item1:first-of-type{ background: blue;}選中的是class為item1的元素的父元素的第一個特定類似的子元素，即第一個p標(biāo)簽元素和第一個h3標(biāo)簽元素，背景設(shè)置為藍(lán)色。
