級聯(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é)果

優(yōu)先級

如果為同一個(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)！