class 和 id 的使用場(chǎng)景?
- class用于選擇同一類型的元素削咆，id具有唯一性屎篱，一個(gè)id只能匹配一個(gè)元素盈罐。
CSS選擇器常見(jiàn)的有幾種?
- 基礎(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] 匹配所有屬性為value的元素（div[type=text]匹配id=text的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的元素 - 偽類選擇器
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元素
E:focus 匹配獲得焦點(diǎn)的e元素 - 偽元素選擇器
E::first-line 匹配E元素的第一行
E::first-letter 匹配E元素的第一個(gè)字母
E::before 在e元素之前插入生成的內(nèi)容
E::after 在e元素之后插入生成的內(nèi)容
選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)偷卧？
1.屬性后+!important：p {color:#ccc!important;}
2.內(nèi)聯(lián)樣式：
3.id選擇器： #id
4.類選擇器： .class
5.偽類選擇器：a:link
6.屬性選擇器：h1{}
7.標(biāo)簽選擇器：p[XXX]
8.通用選擇器：*
9.瀏覽器自定義
復(fù)雜場(chǎng)景時(shí)，計(jì)算優(yōu)先級(jí)時(shí)通過(guò)數(shù)標(biāo)簽來(lái)計(jì)算吆倦，先數(shù)id听诸，如果id相等再數(shù)類，如果id不相等蚕泽，id多的選擇器權(quán)重高晌梨，權(quán)重越高，優(yōu)先級(jí)越高。如果id選擇器數(shù)量相同仔蝌，再數(shù)類選擇器砸逊，最后數(shù)標(biāo)簽。
a:link, a:hover, a:active, a:visited 的順序是怎樣的掌逛？ 為什么师逸？
a:link
a:visited
a:hover
a:active
四個(gè)選擇器優(yōu)先級(jí)相同，要考慮他們會(huì)相互覆蓋豆混，只能按照這個(gè)順序
以下選擇器分別是什么意思?
#header{
}
.header{
}
.header .logo{
}
.header.mobile{
}
.header p, .header h3{
}
#header .nav>li{
}
#header a:hover{
}
#header .logo~p{
}
#header input[type="text"]{
}
- id為header的元素
- class為header的元素
- class為header 子元素中 class為logo的元素
- class同時(shí)包含header和mobile的元素
- class為header元素中的p標(biāo)簽和h3標(biāo)簽
- id為header的class為nav元素的直接子元素為li的標(biāo)簽
- id為header元素中的a標(biāo)簽的hover狀態(tài)
- id為header下 class為logo標(biāo)簽之后所有的p標(biāo)簽
- id為header的后代中篓像，input標(biāo)簽中，屬性type的值為"text"的元素集合
列出你知道的偽類選擇器
1.E:first-child 匹配元素E的第一個(gè)子元素
2.E:link 匹配所有未被點(diǎn)擊的鏈接
3.E:visited 匹配所有已被點(diǎn)擊的鏈接
4.E:active 匹配鼠標(biāo)已經(jīng)其上按下皿伺、還沒(méi)有釋放的E元素
5.E:hover 匹配鼠標(biāo)懸停其上的E元素
6.E:enabled 匹配表單中可用的元素
7.E:disabled 匹配表單中禁用的元素
8.E:checked 匹配表單中被選中的radio或checkbox元素
9.E::selection 匹配用戶當(dāng)前選中的元素
10.E:nth-child(n) 匹配其父元素的第n個(gè)子元素员辩，第一個(gè)編號(hào)為1
11.E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為1
12.E:nth-of-type(n) 與:nth-child()作用類似鸵鸥，但是僅匹配使用同種標(biāo)簽的元素
13.E:nth-last-of-type(n) 與:nth-last-child() 作用類似奠滑，但是僅匹配使用同種標(biāo)簽的元素
14.E:last-child 匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1)
15.E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素妒穴，等同于:nth-of-type(1)
16.E:last-of-type 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素宋税，等同于:nth-last-of-type(1)
17.E:only-child 匹配父元素下僅有的一個(gè)子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
18.E:only-of-type 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素讼油，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
19.E:not(selector) 匹配不符合當(dāng)前選擇器的任何元素
div:first-child和div:first-of-type的作用和區(qū)別
- first-child 匹配其父元素的第一個(gè)子元素
- first-of-type 匹配其父元素下?lián)碛邢嗤瑯?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>
- .item1:first-child{ color: red;}
指定父元素中第一個(gè)類名為item1的元素的字體顏色為紅色 - .item1:first-of-type{ background: blue;}
父元素中每一類元素的第一個(gè)類名為item1的元素的背景色為藍(lán)色矮台，
（div中有p乏屯、h3兩類標(biāo)簽，每一類的第一個(gè)類名為item1的元素背景變?yōu)樗{(lán)色瘦赫，所以：內(nèi)容為aa和bb被選中變?yōu)樗{(lán)色）
