class 和 id 的使用場景?
class指定標(biāo)簽的類名，<input type="text" class="text">把需要相同樣式的元素歸類于一個name下，需要此樣式的標(biāo)簽添加至此類。
ID指定標(biāo)簽的唯一標(biāo)識，<input type="text" id="text">第一、根據(jù)提供的唯一標(biāo)識的ID號可以快速的獲取元素信息；第二、用于充當(dāng)label標(biāo)簽for屬性的值，示例：<label for='userid'>用戶名：</label>，表示單擊此“用戶名”標(biāo)簽時，id為userid的標(biāo)簽獲得焦點。CSS選擇器常見的有幾種?
基礎(chǔ)選擇器
*：通用選擇器，匹配頁面任何元素（少用）
#id：id選擇器，匹配特定ID的元素
.class：類選擇器，匹配class包含而不是等于特定類的元素
element：標(biāo)簽選擇器
組合選擇器
E,F：多元素選擇器，用逗號分隔，同時匹配元素E和元素F
E F：后代選擇器，空格分隔，匹配E元素所有的后代元素F，不只是子元素，向下遞歸
E>F：子元素選擇器，>分隔，匹配E元素的所有直接子元素
E+F：直接相鄰子元素，同級
E~F：普通相鄰子元素，所有同級F，不管是否相鄰
.class1.class2 、element#id：中間沒有分隔符，表示既...又...的關(guān)系
屬性選擇器
E[attr]：匹配所有具有屬性attr的元素
E[attr=value]：匹配屬性attr值為value的元素
E[attr ~=value]：匹配所有屬性attr具有多個空格分隔，其中一個值為value的
E[attr ^=value]：匹配屬性attr值以value開頭的元素
E[attr $=value]：匹配屬性attr值以value結(jié)尾的元素
E[attr *=value]：匹配屬性attr值包含value的元素
偽類選擇器
E:first-child 匹配作為第一個子元素的元素E
E:linked 匹配所有未被點擊的鏈接
E:visited 匹配所有已被點擊的鏈接
E:active 匹配鼠標(biāo)已經(jīng)按下沒有釋放的元素E
E:hover 匹配鼠標(biāo)懸停其上的元素E
E:focus 匹配獲得當(dāng)前焦點的元素E
E:lang(c) 匹配lang屬性為c的元素E
E:enabled 匹配表單中可用的元素E
E:disabled 匹配表單中禁用的元素E
E:checked 匹配表單中被選中的radio或checkbox的元素E
E::selection 匹配用戶當(dāng)前選中的元素
E:nth-child(n) 匹配其父元素的第n個子元素
E:nth-of-type(n) 匹配其父元素僅適用相同標(biāo)簽的第n個子元素
偽元素選擇器
E::first-line 匹配E元素內(nèi)容的第一行
E::first-letter 匹配E元素內(nèi)容的第一個字母
E::before 在E元素之前插入生成的內(nèi)容
E::after 在E元素之后插入生成的內(nèi)容選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計算優(yōu)先級？
選擇器的優(yōu)先級是指多條規(guī)則作用于同一個元素上，且定義相同屬性的不同值
優(yōu)先級由高到低
在屬性后面使用!important->style屬性寫在標(biāo)簽里面的內(nèi)聯(lián)樣式 -> ID選擇器 -> 類選擇器 -> 偽類選擇器 -> 屬性選擇器 -> 標(biāo)簽選擇器 -> 通配符選擇器 -> 瀏覽器自定義
復(fù)雜場景的計算方式
a：行內(nèi)樣式
b：ID選擇器
c：類、屬性選擇器、偽類選擇器
d：標(biāo)簽選擇器、偽元素選擇器
統(tǒng)計abcd四種情況的數(shù)量，并按照abcd的順序依次比較
例如：
#test p.class1{...} /*a=0 b=1 c=1 d=1*/
#test .class1.class2{...} /*a=0 b=1 c=2 d=0 這個的優(yōu)先級高*/
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
順序：a:link -> a:visited -> a:hover -> a:active
原因：當(dāng)把a(bǔ):visited放在最后時，鏈接被觸發(fā)過，這個樣式會把前面所有的樣式覆蓋，導(dǎo)致hover、active失效。如果順序是a:link -> a:visited -> a:active -> a:hover，active將失效，點擊鏈接不動時樣式會被hover的覆蓋。a:link和a:visited的位置可以互換，總而言之，寫在最后的樣式會覆蓋之前的樣式。以下選擇器分別是什么意思?
#header ID名為header的選擇器
.header 類名為header的選擇器
.header .logo 匹配class="header"的后代選擇器class="logo"的元素
.header.mobile 匹配既有class="header"又有class="mobile"的元素
.header p, .header h3 匹配class="header"的后代選擇器p標(biāo)簽的元素或class="header"的后代選擇器h3標(biāo)簽的元素
#header .nav>li 匹配ID="header"的后代選擇器class="nav"的直接子元素li標(biāo)簽的元素
#header a:hover 匹配ID="header"的后代a元素鼠標(biāo)懸浮在其表面時的樣式
#header .logo~p 匹配id為header下的class為logo之后的所有同級p元素
#header input[type="text"] 匹配ID="header"的后代選擇器中input標(biāo)簽type屬性值為text的元素
- 列出你所知道的偽類選擇器
E:first-child 匹配作為第一個子元素的元素E
E:linked 匹配所有未被點擊的鏈接
E:visited 匹配所有已被點擊的鏈接
E:active 匹配鼠標(biāo)已經(jīng)按下沒有釋放的元素E
E:hover 匹配鼠標(biāo)懸停其上的元素E
E:focus 匹配獲得當(dāng)前焦點的元素E
E:lang(c) 匹配lang屬性為c的元素E
E:enabled 匹配表單中可用的元素E
E:disabled 匹配表單中禁用的元素E
E:checked 匹配表單中被選中的radio或checkbox的元素E
E::selection 匹配用戶當(dāng)前選中的元素
E:nth-child(n) 匹配其父元素的第n個子元素
E:nth-of-type(n) 匹配其父元素僅適用相同標(biāo)簽的第n個子元素 - div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
作用：
div:first-child：匹配同級元素下的第一個且為div的元素
div:first-of-type：匹配同級元素下第一個div元素
div :first-child：匹配標(biāo)簽為div的后代選擇器中第一個元素
div :first-of-type：匹配div的后代元素的同種類型的第一個元素
區(qū)別：
div:first-child：偽類選擇器，沒有空格，指當(dāng)前元素父元素下的第一個子元素
div:first-of-type：偽類選擇器，沒有空格，指當(dāng)前元素父元素下同種類型的第一個子元素
div :first-child：組合選擇器，有空格，指當(dāng)前div下的第一個元素
div :first-of-type：組合選擇器，有空格，指當(dāng)前div下的同種累心的第一個元素 - 運行如下代碼，解析下輸出樣式的原因。
原因：首先.item1:first-child指的是class="item1"的父元素的第一個子元素，也就是aa，設(shè)置為紅色；然后是.item1:first-of-type指的是class="item1"的父元素的第一個同標(biāo)簽的子元素，<p class="item1">aa</p>，aa的背景色為藍(lán)色，<h3 class="item1">bb</h3>，bb的背景色為藍(lán)色，<h3 class="item1">ccc</h3>，第一個同標(biāo)簽的子元素指的是bb，所以還是設(shè)置的bb的背景色為藍(lán)色。
