class 和 id 的使用場(chǎng)景?
- id選擇器在頁(yè)面中是唯一的，來(lái)定義獨(dú)一無(wú)二的樣式
- class選擇器是用來(lái)定義相似或相同的一組樣式
CSS選擇器常見的有幾種?
-基礎(chǔ)選擇器
| 選擇器 |
含義 |
| * |
通用元素選擇器鼎天，匹配頁(yè)面任何元素（這也就決定了我們很少使用） |
| #id |
id選擇器周崭，匹配特定id的元素 |
| .class |
類選擇器佑女，匹配class包含(不是等于)特定類的元素 |
| element |
標(biāo)簽選擇器 |
| 選擇器 |
含義 |
| E,F |
多元素選擇器，用,分隔，同時(shí)匹配元素E或元素F |
| E F |
后代選擇器，用空格分隔翠肘，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F |
| E>F |
子元素選擇器商佑，用>分隔锯茄，匹配E元素的所有直接子元素 |
| E+F |
直接相鄰選擇器，匹配E元素之后的相鄰的同級(jí)元素F |
| E~F |
普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級(jí)元素F（無(wú)論直接相鄰與否） |
| .class1.class2 |
id和class選擇器和選擇器連寫的時(shí)候中間沒(méi)有分隔符肌幽，. 和 # 本身充當(dāng)分隔符的元素 |
| element#id |
id和class選擇器和選擇器連寫的時(shí)候中間沒(méi)有分隔符晚碾，. 和 # 本身充當(dāng)分隔符的元素 |
| 選擇器 |
含義 |
| E[attr] |
匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div |
| E[attr = value] |
匹配屬性attr值為value的元素喂急，div[id=test],匹配id=test的div |
| E[attr ~= value] |
匹配所有屬性attr具有多個(gè)空格分隔格嘁、其中一個(gè)值等于value的元素 |
| E[attr ^= value] |
匹配屬性attr的值以value開頭的元素 |
| E[attr $= value] |
匹配屬性attr的值以value結(jié)尾的元素 |
| E[attr *= value] |
匹配屬性attr的值包含value的元素 |
| 選擇器 |
含義 |
| E:first-child |
匹配作為長(zhǎng)子（第一個(gè)子女）的元素E |
| E:link |
匹配所有未被點(diǎn)擊的鏈接 |
| E:visited |
匹配所有已被點(diǎn)擊的鏈接 |
| E:active |
匹配鼠標(biāo)已經(jīng)其上按下、還沒(méi)有釋放的E元素 |
| E:hover |
匹配鼠標(biāo)懸停其上的E元素 |
| E:focus |
匹配獲得當(dāng)前焦點(diǎn)的E元素 |
| E:lang(c) |
匹配lang屬性等于c的E元素 |
| E:enabled |
匹配表單中可用的元素 |
| E:disabled |
匹配表單中禁用的元素 |
| E:checked |
匹配表單中被選中的radio或checkbox元素 |
| E::selection |
匹配用戶當(dāng)前選中的元素 |
| E:root |
匹配文檔的根元素廊移，對(duì)于HTML文檔糕簿，就是HTML元素 |
| E:nth-child(n) |
匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1 |
| E:nth-last-child(n) |
匹配其父元素的倒數(shù)第n個(gè)子元素狡孔，第一個(gè)編號(hào)為1 |
| E:nth-of-type(n) |
與:nth-child()作用類似懂诗，但是僅匹配使用同種標(biāo)簽的元素 |
| E:nth-last-of-type(n) |
與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素 |
| E:last-child |
匹配父元素的最后一個(gè)子元素苗膝，等同于:nth-last-child(1) |
| E:first-of-type |
匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素殃恒，等同于:nth-of-type(1) |
| E:last-of-type |
匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1) |
| E:only-child |
匹配父元素下僅有的一個(gè)子元素辱揭，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
| E:only-of-type |
匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素离唐，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:empty |
匹配一個(gè)不包含任何子元素的元素，文本節(jié)點(diǎn)也被看作子元素 |
| E:not(selector) |
匹配不符合當(dāng)前選擇器的任何元素 |
| 選擇器 |
含義 |
| E::first-line |
匹配E元素內(nèi)容的第一行 |
| E::first-letter |
匹配E元素內(nèi)容的第一個(gè)字母 |
| E::before |
在E元素之前插入生成的內(nèi)容 |
| E::after |
在E元素之后插入生成的內(nèi)容 |
選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)问窃？
選擇器優(yōu)先級(jí)從高到低分別是：
- 在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
復(fù)雜場(chǎng)景的計(jì)算：
a:link, a:hover, a:active, a:visited 的順序是怎樣的亥鬓？ 為什么？
a:link {
color: #000;
}
a:visited {
color: #F00;
}
a:hover {
color: #0F0;
}
a:active {
color: #00F;
}
原因：當(dāng)鼠標(biāo)未點(diǎn)擊a鏈接時(shí)域庇， a:link起作用嵌戈，所有應(yīng)該放在最上面。當(dāng)鼠標(biāo)放在鏈接上時(shí)较剃，a:link a:hover 都會(huì)起作用咕别，如果想讓hover起作用，應(yīng)將其放在后面写穴。當(dāng)鼠標(biāo)點(diǎn)擊鏈接的時(shí)候惰拱，如果想讓a:active起作用，應(yīng)將其放在后面,a:visited鼠標(biāo)點(diǎn)擊過(guò)后的樣式啊送，這個(gè)如果放到最后偿短，a:hover a:active都不會(huì)生效，所以要放到這兩個(gè)前面
以下選擇器分別是什么意思?
#header{} ：匹配id為header的元素
.header{} ：匹配class為header的元素
.header .logo{} 匹配class為header下的class名為logo的元素
.header.mobile{} 匹配同時(shí)具有class名為header和mobile的元素
.header p, .header h3{} 匹配class為header下的p元素和class為header下的h3元素
#header .nav>li{} 匹配id為header下的class為nav的直接子元素標(biāo)簽為li的元素
#header a:hover{} id為header下的a標(biāo)簽鼠標(biāo)放上去的樣式
#header .logo~p{} id為header下的class為logo的同級(jí)元素后的p標(biāo)簽的樣式
#header input[type="text"]{} id為header下的input的type值為text的元素的樣式
列出你知道的偽類選擇器
| 選擇器 |
含義 |
| E:first-child |
匹配作為長(zhǎng)子（第一個(gè)子女）的元素E |
| E:link |
匹配所有未被點(diǎn)擊的鏈接 |
| E:visited |
匹配所有已被點(diǎn)擊的鏈接 |
| E:active |
匹配鼠標(biāo)已經(jīng)其上按下馋没、還沒(méi)有釋放的E元素 |
| E:hover |
匹配鼠標(biāo)懸停其上的E元素 |
| E:focus |
匹配獲得當(dāng)前焦點(diǎn)的E元素 |
| E:lang(c) |
匹配lang屬性等于c的E元素 |
| E:enabled |
匹配表單中可用的元素 |
| E:disabled |
匹配表單中禁用的元素 |
| E:checked |
匹配表單中被選中的radio或checkbox元素 |
| E::selection |
匹配用戶當(dāng)前選中的元素 |
| E:root |
匹配文檔的根元素昔逗，對(duì)于HTML文檔，就是HTML元素 |
| E:nth-child(n) |
匹配其父元素的第n個(gè)子元素篷朵，第一個(gè)編號(hào)為1 |
| E:nth-last-child(n) |
匹配其父元素的倒數(shù)第n個(gè)子元素勾怒，第一個(gè)編號(hào)為1 |
| E:nth-of-type(n) |
與:nth-child()作用類似婆排，但是僅匹配使用同種標(biāo)簽的元素 |
| E:nth-last-of-type(n) |
與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素 |
| E:last-child |
匹配父元素的最后一個(gè)子元素笔链，等同于:nth-last-child(1) |
| E:first-of-type |
匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素段只，等同于:nth-of-type(1) |
| E:last-of-type |
匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1) |
| E:only-child |
匹配父元素下僅有的一個(gè)子元素鉴扫，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
| E:only-of-type |
匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素赞枕，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:empty |
匹配一個(gè)不包含任何子元素的元素，文本節(jié)點(diǎn)也被看作子元素 |
| E:not(selector) |
匹配不符合當(dāng)前選擇器的任何元素 |
div:first-child坪创、div:first-of-type炕婶、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
- div:first-child：選擇屬于其父元素的首個(gè)子元素的每個(gè) <div> 元素，并為其設(shè)置樣式莱预。
- div :first-of-type：選擇屬于其父元素的同種標(biāo)簽下的首個(gè)子元素的每個(gè) <div> 元素柠掂，并為其設(shè)置樣式
- div :first-child: 選擇div里面的第一個(gè)子元素
- div :first-of-type: 選擇div里面的同種標(biāo)簽下的第一個(gè)子元素
運(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>
因?yàn)?item1:first-child是指class為item1的父元素也就是class為ct的div下面的第一個(gè)子元素陪踩，就是aa為紅色
.item1:first-of-type是指class為item1的父元素也就是class為ct的div下面的同種類型第一個(gè)子元素杖们，這里面有兩個(gè)類型悉抵，p和h3
找每種類型的第一個(gè)，就是aa bb 背景為藍(lán)色
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
