級聯(lián)、繼承、優(yōu)先級。
(資料圖)
樣式?jīng)_突:指同一元素具有相同的樣式但有兩個(gè)不同的屬性值。
層疊的作用:解決風(fēng)格沖突。
使一種樣式覆蓋(級聯(lián))另一種樣式,以便元素僅選擇一種樣式進(jìn)行顯示。
層疊原則:對于風(fēng)格沖突,遵循就近原則。哪種風(fēng)格更接近結(jié)構(gòu)就會被執(zhí)行。
樣式div { color:red; }/stylebody div CSS 三大特性之一:層疊。 /div/body 運(yùn)行結(jié)果
樣式div { color:red; } div { color: 藍(lán)色; }/stylebody div CSS 三大特性之一:層疊。 /div/body 運(yùn)行結(jié)果
樣式div { color:red; } div { color: 藍(lán)色; }/stylebody div style='color:orange;' CSS的三大特性之一:級聯(lián)。 /div/body 運(yùn)行結(jié)果
子標(biāo)簽會繼承父標(biāo)簽的一些樣式,如文本屬性、字體屬性、顏色屬性、字體行高等。
也就是說,在父標(biāo)簽中添加了一些樣式后,不需要在子標(biāo)簽中再次添加該樣式,這樣可以減少代碼冗余。
style /* 繼承*/.divJC { /* 12px: 字體大小24px: 行高*/font: 12px/24px '微軟雅黑';顏色:粉色; }/stylebody div class='divJC' CSS 繼承。 pCSS 繼承。 /p /div/body
運(yùn)行結(jié)果
如果為同一個(gè)元素指定多個(gè)選擇器,則會生成優(yōu)先級,權(quán)重較高的樣式會先顯示。
當(dāng)選擇器相同時(shí),進(jìn)行級聯(lián)。當(dāng)選擇器不同時(shí),使用選擇器權(quán)重。權(quán)重排名順序:
繼承或*(全局選擇器):0,0,0,0 元素選擇器:0,0,0,1 類選擇器或偽類選擇器:0,0,1,0 ID 選擇器:0,1 ,0,0內(nèi)聯(lián)樣式:1,0,0,0 在屬性值:無窮大后添加:“!Important”。
防范措施:
繼承的重量為零。加權(quán)重疊和相加:復(fù)合選擇器將有重疊和相加的權(quán)利,但僅限于權(quán)重范圍內(nèi),永遠(yuǎn)不會有進(jìn)位。 style /* 優(yōu)先級*//*div父標(biāo)簽的顏色屬性,子標(biāo)簽繼承權(quán)重為零*/div{ color: blue; }/*元素標(biāo)簽的權(quán)重為0,0,0,1*/span { color:black; } /*類選擇器權(quán)重為0,0,1,0*/.divYXJ { font-size: 20px;顏色: 棕色; }/*ID選擇器權(quán)重為0,1,0,0*/#Yxj { color: aquamarine; }/stylebody div CSS三大特性的優(yōu)先級:繼承或全局選擇器*(0,0,0,0)。 br spanCSS三大特性的優(yōu)先級:元素選擇(0,0,0,1)。 /spanbr span class='divYXJ' CSS三大特性的優(yōu)先級:類選擇器或偽類選擇器(0,0,1,0)。 /spanbr span class='divYXJ' id='Yxj' CSS三大特性的優(yōu)先級:ID選擇器(0,1,0,0)。 /spanbr span class='divYXJ' id='Yxj' CSS三大特性的優(yōu)先級:內(nèi)聯(lián)樣式(1,0,0,0)。 /spanbr span class='divYXJ' id='Yxj' CSS三大特性的優(yōu)先級:important(無窮大)。 /span /div/body 運(yùn)行結(jié)果
style /* 優(yōu)先級*//*div父標(biāo)簽的顏色屬性,子標(biāo)簽繼承權(quán)重為零*/div{ color: blue; }/*元素標(biāo)簽的權(quán)重為0,0,0,1*/span { color:black !important ; }/*類選擇器權(quán)重為0,0,1,0*/.divYXJ { font-size: 20px;顏色: 棕色; }/*ID選擇器權(quán)重為0,1,0,0*/#Yxj { color: aquamarine; }/stylebody div CSS三大特性的優(yōu)先級:繼承或全局選擇器*(0,0,0,0)。 br spanCSS三大特性的優(yōu)先級:元素選擇(0,0,0,1)。 /spanbr span class='divYXJ' CSS三大特性的優(yōu)先級:類選擇器或偽類選擇器(0,0,1,0)。 /spanbr span class='divYXJ' id='Yxj' CSS三大特性的優(yōu)先級:ID選擇器(0,1,0,0)。 /spanbr span class='divYXJ' id='Yxj' CSS三大特性的優(yōu)先級:內(nèi)聯(lián)樣式(1,0,0,0)。 /spanbr span class='divYXJ' id='Yxj' CSS三大特性的優(yōu)先級:important(無窮大)。 /span /div/body 無限運(yùn)行結(jié)果顯示
今天我們就來學(xué)習(xí)一下,下次繼續(xù)。我們不能說明天,因?yàn)槲覀儾恢烂魈焓欠衲芗皶r(shí)學(xué)習(xí)??禳c(diǎn)!