1.class 和 id 的使用場景?
id選擇器：每個(gè)標(biāo)簽只能有一個(gè)id且每個(gè)id只能使用一次凛虽，多用于頁面分塊的塊級(jí)標(biāo)簽上捌锭；
class選擇器：每個(gè)標(biāo)簽可以有多個(gè)類且同一個(gè)類可以用到不同的標(biāo)簽上祥山，多用于多個(gè)標(biāo)簽樣式相似或完全相同時(shí)厂抽；
2.CSS選擇器常見的有幾種?
| 基礎(chǔ)選擇器 | 含義 |
|---|---|
| * | 通用元素選擇器 |
| #id | id選擇器 |
| .class | 類選擇器 |
| element | 標(biāo)簽選擇器 |
| 屬性選擇器 | 含義 |
|---|---|
| E[attr] | 匹配所有屬性為attr的元素 |
| E[attr=value] | 匹配屬性attr為value的元素 |
| E[attr~=value] | 匹配所有屬性為attr具有多個(gè)空格分隔，其中一個(gè)值為value的元素 |
| E[attr*=value] | 匹配屬性attr的值包含value的元素 |
| 偽類選擇器 | 含義 |
|---|---|
| E:first-child | E的父元素下的第一個(gè)子元素 |
| 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:nth-child(n) | 匹配其父元素的第n個(gè)子元素 |
| E:nth-last-child(n) | 匹配其父元素的倒數(shù)第n個(gè)子元素 |
| E:last-child | E的父元素下的最后一個(gè)子元素 |
| 組合選擇器 | 含義 |
|---|---|
| E,F | 多元素選擇器狭归，用,分隔夭坪，同時(shí)匹配元素E或元素F |
| E F | 后代選擇器，用空格分隔唉铜，匹配E元素所有的后代（不只是子元素台舱、子元素向下遞歸）元素F |
| E>F | 子元素選擇器，用>分隔潭流，匹配E元素的所有直接子元素 |
| E+F | 直接相鄰選擇器竞惋，匹配E元素之后的相鄰的同級(jí)元素F |
| E~F | 普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級(jí)元素F（無論直接相鄰與否） |
| .class1.class2 | id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符灰嫉，. 和 # 本身充當(dāng)分隔符的元素 |
| element#id | id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符拆宛，. 和 # 本身充當(dāng)分隔符的元素 |
| 偽元素選擇器 | 含義 |
|---|---|
| E::before | 在E元素之前插入生成的內(nèi)容 |
| E::after | 在E元素之后插入生成的內(nèi)容 |
| E::first-line | 匹配E元素內(nèi)容的第一行 |
| E::first-letter | 匹配E元素內(nèi)容的第一個(gè)字母 |
3. 選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場景如何計(jì)算優(yōu)先級(jí)？
從高到低分別是:
- 在屬性后面使用 !important 會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
9.瀏覽器自定義
復(fù)雜場景時(shí)讼撒，計(jì)算優(yōu)先級(jí)時(shí)通過數(shù)標(biāo)簽來計(jì)算浑厚，先數(shù)id，如果id相等再數(shù)類根盒，如果id不相等钳幅，id多的選擇器權(quán)重高，權(quán)重越高炎滞，優(yōu)先級(jí)越高敢艰。如果id選擇器數(shù)量相同，再數(shù)類選擇器册赛，最后數(shù)標(biāo)簽钠导。
4. a:link, a:hover, a:active, a:visited 的順序是怎樣的震嫉？ 為什么？
a:link
a:visited
a:hover
a:active
原因：
- 當(dāng)鼠標(biāo)移動(dòng)到a標(biāo)簽上牡属，此時(shí)與標(biāo)簽顏色相關(guān)的選擇器有：a:link,a:visited,a:hover,這三個(gè)選擇器擁有相同的優(yōu)先級(jí)票堵，但是被寫在最后的選擇器會(huì)覆蓋掉之前的選擇器，因此要想實(shí)現(xiàn)“當(dāng)鼠標(biāo)移動(dòng)到a標(biāo)簽上變換顏色”的效果逮栅，需要將a:hover置于 a:link 和 a:visited 之后
- 當(dāng)鼠標(biāo)點(diǎn)擊a標(biāo)簽悴势，此時(shí)與標(biāo)簽顏色相關(guān)的選擇器有：a:link,a:visited,a:hover和a:active，這四個(gè)選擇器擁有相同的優(yōu)先級(jí)证芭，但是被寫在最后的選擇器會(huì)覆蓋掉之前的選擇器瞳浦，因此要想實(shí)現(xiàn)“當(dāng)鼠標(biāo)點(diǎn)擊a標(biāo)簽時(shí)變換顏色”的效果担映，需要將a:active置于a:link,a:visited,a:hover 之后废士。
5.以下選擇器分別是什么意思?
| 選擇器的樣式 | 含義 |
|---|---|
| #header{ } | id選擇器，匹配id="header"的元素 |
| .header{ } | 類選擇器蝇完，匹配class="header"的元素 |
| .header .logo{ } | 后代選擇器官硝，匹配class="header"元素的后代元素中class="logo"的元素 |
| .header.mobile{ } | 類選擇器，匹配class="header mobile"的元素 |
| .header p, .header h3{ } | 多元素選擇器短蜕，匹配class="header"元素的后代p元素和后代h3元素 |
| #header .nav>li{ } | 多元素選擇器氢架，匹配id="header"元素的后代class="nav"元素的直接后代li元素 |
| #header a:hover{ } | 偽類選擇器，匹配id="header"元素的后代a元素鼠標(biāo)懸浮在其表面時(shí)的樣式 |
6. 列出你知道的偽類選擇器.
| 偽類選擇器 | 含義 |
|---|---|
| E:first-child | E的父元素下的第一個(gè)子元素 |
| 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:nth-child(n) | 匹配其父元素的第n個(gè)子元素 |
| E:nth-last-child(n) | 匹配其父元素的倒數(shù)第n個(gè)子元素 |
| E:last-child | E的父元素下的最后一個(gè)子元素 |
7. div:first-child和div:first-of-type的作用和區(qū)別?
:first-child 匹配的是某父元素的第一個(gè)子元素岖研，可以說是結(jié)構(gòu)上的第一個(gè)子元素。
:first-of-type 匹配的是該類型的第一個(gè)警检，類型是指什么呢孙援，就是冒號(hào)前面匹配到的東西，比如 p:first-of-type扇雕，就是指所有p元素中的第一個(gè)拓售。這里不再限制是第一個(gè)子元素了，只要是該類型元素的第一個(gè)就行了镶奉，當(dāng)然這些元素的范圍都是屬于同一級(jí)的础淤，也就是同輩的。
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;
}
這會(huì)讓aa變成紅色； - .item1:first-of-type{
background: blue;
}
這會(huì)讓aa和bb都變成藍(lán)色建峭。
