1.class 和 id 的使用場(chǎng)景?
- class用于網(wǎng)頁(yè)中樣式的設(shè)置宣肚，同一元素可以定義多種樣式（多個(gè)class),同一class可以被運(yùn)用到不同元素上（不同元素class取值一樣）。
- id用來(lái)作為文檔內(nèi)某一元素的唯一標(biāo)識(shí)扫俺，不可以被重復(fù)命名舶赔，且id的權(quán)重比class的權(quán)重高很多淆衷，多用于js操作中實(shí)現(xiàn)元素的獲取淮椰。
2.CSS選擇器常見(jiàn)的有幾種?
1.基礎(chǔ)選擇器
-
*通用元素選擇器镜遣，匹配頁(yè)面任何元素（這也就決定我們很少使用） -
#id選擇器，匹配特定id的元素 - .class 類(lèi)選擇器衫哥，匹配class包含（不是等于）特定類(lèi)的元素
- element 標(biāo)簽選擇器
如下：
*{
margin:0;
padding:0;
}
#id-selector{
color:red;
}
.class-selector{
background:black;
}
p{
font-size:20px;
}
2.組合選擇器
- 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選擇器和選擇器連寫(xiě)的時(shí)候中間沒(méi)有分隔符肩杈，
.和#本身充當(dāng)分隔符的元素柴我。 - element#id id和class選擇器和選擇器連寫(xiě)的時(shí)候中間沒(méi)有分隔符，
.和#本身充當(dāng)分隔符的元素扩然。
3.屬性選擇器
- 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包含的元素
4.偽類(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:lang(c) 匹配lang屬性等于c的E元素
- E:enabled 匹配表單中可用的元素
- E:disabled 匹配表單中禁用的元素
- E:checked 匹配表單中被選中的 radio或者checkbox元素
- E::selectionz 匹配用戶(hù)當(dāng)前選中的元素
（所以的選擇器列表在MDN）
5.偽類(lèi)選擇器
- E:root 匹配文檔的根元素，對(duì)于HTML文檔访惜，就是HTML元素
- E:nth-child(n) 匹配其父元素的第n個(gè)子元素嘹履，第一個(gè)編號(hào)為1
- E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)標(biāo)號(hào)為1
- E:nth-of-type(n) 與nth-child類(lèi)似债热，但是僅匹配使用同種標(biāo)簽的元素
- E:nth-last-of-type(n) 與nth-last-child類(lèi)似砾嫉，但是僅匹配使用同種標(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)前選擇器的任何元素
n的取值：
- 1,2,3,4,5
- 2n+1,2n,4n-1
- odd,even
5.偽元素選擇器
- E::first-line 匹配E元素內(nèi)容的第一行
- E::first-letter 匹配E元素內(nèi)容的第一個(gè)字母
- E::before 在E元素之前插入生成的內(nèi)容
- E::after 在E元素之后插入生成的內(nèi)容
3.選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)召夹？
- 優(yōu)先級(jí)
1.在屬性后面使用岩喷！important會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
2.作為style屬性寫(xiě)在元素標(biāo)簽上的內(nèi)聯(lián)屬性
3.id選擇器
4.類(lèi)選擇器
5.偽類(lèi)選擇器
6.屬性選擇器
7.標(biāo)簽選擇器
8.通配符選擇器
9.瀏覽器自定義 - 復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)
行內(nèi)樣式<div style="xxx"></div>==>a
id選擇器==>b
類(lèi)，屬性選擇器和偽類(lèi)選擇器==>c
標(biāo)簽選擇類(lèi)监憎、偽元素==>d
* {} /* a=0 b=0 c=0 d=0 ->0,0,0,0 */
p {} /* a=0 b=0 c=0 d=1 ->0,0,0,1*/
a:hover {} /* a=0 b=0 c=1 d=1 ->0,0,1,1 */
ul li {} /* a=0 b=0 c=0 d=2 ->0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 ->0,0,0,3 */
h1+input[type=hidden] {} /* a=0 b=0 c=1 d=2 ->0,0,1,2 */
ul ol li.active {} /* a=0 b=0 c=1 d=3 ->0,0,1,3 */
#ct .box p {} /* a=0 b=1 c=1 d=1 ->0,1,1,1*/
div#header:after {} /*a=0 b=1 c=0 d=2 ->0,1,0,2*/
style=" " {} /* a=1 c=0 c=0 d=0 ->1,0,0,0*/
4纱意、a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么鲸阔？
a:link 偷霉、a:visited 、a:hover 褐筛、a:active（LoVe/HAte)
- link 鏈接平常的狀態(tài)
- visited 鏈接被訪(fǎng)問(wèn)過(guò)之后的狀態(tài)
- hover 鼠標(biāo)放在鏈接上面的类少，還未松開(kāi)的時(shí)候
- active 鏈接被按下的時(shí)候
- 舉例：
若讓未訪(fǎng)問(wèn)鏈接顏色為藍(lán)色，活動(dòng)鏈接為綠色渔扎，已訪(fǎng)問(wèn)鏈接為紅色硫狞；
第一種情況：定義的順序?yàn)閍:visited、a:hover、a:link残吩，這時(shí)會(huì)發(fā)現(xiàn)财忽，把鼠標(biāo)放在未訪(fǎng)問(wèn)過(guò)的藍(lán)色鏈接上，它并不變成綠色泣侮，只有放在已訪(fǎng)問(wèn)的紅色鏈接上即彪，鏈接才會(huì)變綠；
第二種情況：定義的順序?yàn)椋篴:link活尊、a:visited隶校、a:hover，這時(shí)無(wú)論鼠標(biāo)經(jīng)過(guò)的鏈接有沒(méi)有被訪(fǎng)問(wèn)酬凳，它都會(huì)變成綠色惠况；
這是因?yàn)椋粋€(gè)鼠標(biāo)經(jīng)過(guò)的未訪(fǎng)問(wèn)鏈接同時(shí)擁有a:link宁仔、a:hover兩種屬性稠屠，在第一種情況下，a:link離它最近翎苫，所以它優(yōu)先滿(mǎn)足a:link权埠，而放棄a:hover的重復(fù)定義。第二種情況煎谍，無(wú)論鏈接有沒(méi)有被訪(fǎng)問(wèn)過(guò)攘蔽，它首先要檢查是否符合a:hover的標(biāo)準(zhǔn)（即是否有鼠標(biāo)經(jīng)過(guò)它），滿(mǎn)足呐粘，則變成綠色满俗，不滿(mǎn)足，則繼續(xù)向上查找作岖，一直找到滿(mǎn)足條件的定義為止唆垃。 - 所以：1.鼠標(biāo)經(jīng)過(guò)的"未訪(fǎng)問(wèn)鏈接"同時(shí)擁有a:link、a:hover兩種屬性痘儡，后面的屬性會(huì)覆蓋前面的屬性定義辕万；
- 2.鼠標(biāo)經(jīng)過(guò)的"已訪(fǎng)問(wèn)鏈接”同時(shí)擁有a:visited、a:hover兩種屬性沉删，后面的屬性會(huì)覆蓋前面的屬性定義渐尿；
所以，a:hover定義一定要放在a:link矾瑰、a:visited的后面
5.
#header{
} id為header的元素
.header{
} class為header的元素
.header .logo{
} 匹配class為header的元素下所有后代class為logo的元素
.header.mobile{
} 匹配class為header的元素下所有class為mobile的元素
.header p, .header h3{
} class為header的元素下所有的p標(biāo)簽和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的同級(jí)標(biāo)簽p
#header input[type="text"]{
} 匹配id為header的元素的后代type的值為text的后代input元素
6.列出你知道的偽類(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:lang(c) 匹配lang屬性等于c的E元素
E:enabled 匹配表單中可用的元素
E:disabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的 radio或者checkbox元素
E::selectionz 匹配用戶(hù)當(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è)標(biāo)號(hào)為1
E:nth-of-type(n) 與nth-child類(lèi)似，但是僅匹配使用同種標(biāo)簽的元素
E:nth-last-of-type(n) 與nth-last-child類(lèi)似恍涂，但是僅匹配使用同種標(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)前選擇器的任何元素
7.div:first-child扎阶、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
div:first-child 匹配div其父元素的第一個(gè)子元素
div:first-of-type 匹配div其父元素下使用同種標(biāo)簽的第一個(gè)子元素
div :first-child 匹配div后代的第一個(gè)子元素
div :first-of-type 匹配div后代使用同種標(biāo)簽的第一個(gè)子元素
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>
運(yùn)行效果如下：
b5ec69687ad61899bf89496bb178eef.png
.item1:first-child:匹配item1其父元素下的第一個(gè)子元素，item1的父元素是ct,它的第一個(gè)子元素是 <p class="item1">aa</p>犀农，所以aa字體的顏色變紅惰赋；.item1:first-of-type:匹配item1其父元素下使用同種標(biāo)簽的第一個(gè)子元素，
item1的父元素是ct呵哨，p標(biāo)簽是ct的第一個(gè)子元素赁濒，所以aa被藍(lán)色邊框覆蓋，h3標(biāo)簽的第一個(gè)子元素<h3 class="item1">bb</h3>孟害，所以bb被藍(lán)色邊框覆蓋流部，而 <h3 class="item1">ccc</h3>是h3的第二個(gè)子元素，所以ccc沒(méi)有被藍(lán)色邊框覆蓋纹坐。
