一形葬、class 和 id 的使用場(chǎng)景
- id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次，而class無(wú)此限制暮的。所以笙以，html中在定義元素獨(dú)有的樣式時(shí)，用id冻辩；當(dāng)樣式可以復(fù)用時(shí)猖腕，設(shè)置class。
二恨闪、CSS常見(jiàn)選擇器
-
基礎(chǔ)選擇器
- 通配符選擇器（＊）
- id選擇器（#id）
- 類選擇器（.className）
- 元素選擇器（E）
-
組合選擇器
- 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.class：id和class選擇器和選擇器連寫的時(shí)候中間沒(méi)有分隔符豹休，
.和#本身充當(dāng)分隔符的元素
- E,F：多元素選擇器倘感，用
-
偽類選擇器
- 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[attr]：只使用屬性名伸刃，但沒(méi)有確定任何屬性值
- E[attr="value"]：指定屬性名谎砾，并指定了該屬性的屬性值
- E[attr~="value"]：指定屬性名，并且具有屬性值捧颅，此屬性值是一個(gè)詞列表景图，并且以空格隔開(kāi)，其中詞列表中包含了一個(gè)value詞碉哑，而且等號(hào)前面的“?”不能不寫
- E[attr^="value"]：指定了屬性名挚币，并且有屬性值，屬性值是以value開(kāi)頭的扣典；
- E[attr$="value"]：指定了屬性名妆毕，并且有屬性值，而且屬性值是以value結(jié)束的激捏；
- E[attr*="value"]：指定了屬性名设塔，并且有屬性值凄吏，而且屬值中包含了value远舅；
- E[attr|="value"]：指定了屬性名，并且屬性值是value或者以“value-”開(kāi)頭的值（比如說(shuō)zh-cn）;
-
偽元素選擇器
- 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í)
1.在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
2.作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標(biāo)簽選擇器
8.通配符選擇器
9.瀏覽器自定義-
復(fù)雜場(chǎng)景優(yōu)先級(jí)計(jì)算
- 對(duì)于內(nèi)聯(lián)樣式，取1任连，0蚤吹，0，0
- 對(duì)于id選擇器，取0裁着，1繁涂，0，0
- 對(duì)于class二驰、屬性扔罪、偽類，取0桶雀，0矿酵，1，0
- 對(duì)于標(biāo)簽矗积、偽元素全肮，取0，0棘捣，0辜腺，1
- 通配符對(duì)優(yōu)先級(jí)沒(méi)有貢獻(xiàn)
- 優(yōu)先級(jí)相同后者覆蓋前者
這樣可以方便地計(jì)算選擇器的優(yōu)先級(jí)，如：
div#id:after /0,1,0,2/
div.class /0,0,1,1/
四乍恐、a:link, a:hover, a:active, a:visited 的順序是怎樣的哪自？ 為什么？
按照如下順序禁熏，因?yàn)闃邮綄盈B壤巷，以下選擇器權(quán)重一樣，所以依據(jù)a鏈接當(dāng)前的狀態(tài)應(yīng)用不同的規(guī)則
1.a:link {color:blue;}
2.a:visited {color:blue;}
3.a:hover {color:red;}
4.a:active {color:yellow;}
五瞧毙、以下選擇器含義胧华？
/*id為header元素*/
#header{
}
/*class為header元素*/
.header{
}
/*class為header元素后代中所有class為logo的元素*/
.header .logo{
}
/*class中同時(shí)含有header和mobile的元素*/
.header.mobile{
}
/*class為header元素后代中所有class為logo的元素*/
/*class為header元素后代中所有h3標(biāo)簽*/
.header p, .header h3{
}
/*id為header的元素后代所有class為nav元素中的直接子元素li*/
#header .nav>li{
}
/*id為header的元素后代所有a鏈接鼠標(biāo)懸停其上時(shí)*/
#header a:hover{
}
/*id為header的元素后代所有class為logo的元素之后的所有同級(jí)p元素*/
#header .logo~p{
}
/*id為header的元素后代所有帶有type="text"屬性值的input標(biāo)簽*/
#header input[type="text"]{
}
六、列出你知道的偽類選擇器
見(jiàn)問(wèn)題二
七宙彪、div:first-child和div:first-of-type的作用和區(qū)別
- div:first-child：如果元素的第一個(gè)子元素是div矩动，那么選中這個(gè)div
- div:first-of-type：選中元素下出現(xiàn)的第一個(gè)div（可能不是第一個(gè)子元素）
div:first-child
div:first-of-type
八、運(yùn)行如下代碼释漆，解析下輸出樣式的原因悲没。
原因：
-
.item1:first-child：如果元素下第一個(gè)子元素帶item類，選中這個(gè)子元素男图。所以p.item1為div.ct下符合的子元素示姿。 -
.item1:first-of-type：選擇元素下帶有item1類的同種標(biāo)簽的第一個(gè)，那么第二個(gè)h3是不會(huì)應(yīng)用的樣式的逊笆。
<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)行輸出
