class 和 id 的使用場(chǎng)景?
- id不能重復(fù)一般用于獨(dú)一無(wú)二的標(biāo)簽
- class用于重復(fù)元素相同樣式
CSS選擇器常見(jiàn)的有幾種?
- 基礎(chǔ)選擇器
#id{} id選擇器
.clas{} 類(lèi)選擇器
element{}元素選擇器
- 組合選擇器
e,f 匹配e券勺，f兩個(gè)元素
e f 匹配e的所有f子元素
e>f 匹配e的直接子元素f
e+f 匹配e的下一個(gè)同輩元素f如果沒(méi)有則不匹配
e~f 匹配e的所有f同輩元素
.class.class1 匹配同時(shí)存在class和class1的元素
- 屬性選擇器
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開(kāi)頭的元素
E[attr $= value] 匹配屬性attr的值以value結(jié)尾的元素
E[attr *= value] 匹配屬性attr的值包含value的元素
- 偽類(lèi)選擇器
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:enabled 匹配表單中可用的元素
E:disabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的radio或checkbox元素
E::selection 匹配用戶(hù)當(dāng)前選中的元素
- 偽元素選擇器
E::before 在E元素之前插入生成的內(nèi)容
E::after 在E元素之后插入生成的內(nèi)容
選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)攻晒？
- 簡(jiǎn)單場(chǎng)景
- 在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫(xiě)在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類(lèi)選擇器
- 偽類(lèi)選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
- 復(fù)雜場(chǎng)景
可設(shè)：
行內(nèi)樣式 <div style="xxx"></div> ==> a
ID 選擇器 ==> b
類(lèi)顾复，屬性選擇器和偽類(lèi)選擇器 ==> c
標(biāo)簽選擇器、偽元素 ==> d
如:
p.a#c>p>a[href="#"] //a=0,b=1,c=2,d=3
div+p>a+a>img //a=0,b=0,c=0,d=5
所以是第一個(gè)更重要鲁捏。
a:link, a:hover, a:active, a:visited 的順序是怎樣的芯砸？ 為什么？
- link→visited→hover→active
- 因?yàn)槿绻绻粋€(gè)鼠標(biāo)hover到一個(gè)鏈接時(shí)候同時(shí)會(huì)有兩個(gè)狀態(tài)link hover如果順序正確他會(huì)顯示最下面的hover给梅，如果把visited寫(xiě)在最后面假丧，那么如果這個(gè)鏈接一旦訪問(wèn)以后這個(gè)visited把前面四個(gè)狀態(tài)都給覆蓋了，之后不管你怎么碰他都是visited的顏色动羽。
以下選擇器分別是什么意思?
| 文件路徑 | 意義 |
|---|---|
| #header{} | ID為header的元素 |
| .header{} | class為header的所有元素 |
| .header .logo{} | class為header下class為logo的所有元素 |
| .header.mobile{} | class同時(shí)具有header包帚，mobile的元素 |
| .header p, .header h3{} | 選擇class為header的元素中的所有后代<p>標(biāo)簽和<h3>標(biāo)簽 |
| #header .nav>li{} | id為header的后代中class為nav的后代li |
| #header a:hover{} | id為header的元素的后代中標(biāo)簽為a的元素被鼠標(biāo)hover時(shí)的狀態(tài) |
| #header .logo~p{} | id為header的元素中的class為logo的后代元素的后面的所有同級(jí)p標(biāo)簽 |
| #header input[type="text"]{} | id為header的元素中的文本框 |
列出你知道的偽類(lèi)選擇器
E:first-child 匹配元素E的第一個(gè)子元素
E:last-child 匹配元素E的最后一個(gè)子元素
E:nth-child(n) 匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1
E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素运吓，等同于nth-of-type(1)
E:hover 匹配鼠標(biāo)懸停之上的元素
E:focus 匹配獲得焦點(diǎn)的元素
E:checked 匹配radio渴邦，select的選中元素
div:first-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è)類(lèi)型為div的元素
- div :first-child 匹配所有div元素內(nèi)所有元素中屬于其父元素的首個(gè)子元素
- div :first-of-type 匹配所有div元素內(nèi)所有元素中屬于其父元素的首個(gè)類(lèi)型的子元素
運(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的兄弟元素的第一個(gè)color為red站欺；
.item1:first-of-type{
background: blue;
}
class為item1的兄弟元素第一個(gè)元素且第一次出現(xiàn)的 background為 bluer姨夹；
注意：一定要是兄弟元素。
