更新時間:2021-08-30 來源:黑馬程序員 瀏覽量:
CSS 有三個非常重要的三個特性:層疊性、繼承性、優(yōu)先級。
1. 層疊性
相同選擇器給設(shè)置相同的樣式,此時一個樣式就會覆蓋(層疊)另一個沖突的樣式。層疊性主要解決樣式?jīng)_突的問題。
層疊性原則:
樣式?jīng)_突,遵循的原則是就近原則,哪個樣式離結(jié)構(gòu)近,就執(zhí)行哪個樣式。
樣式不沖突,不會層疊。
CSS 層疊性口訣:長江后浪推前浪,前浪死在沙灘上。
2.繼承性
現(xiàn)實中的繼承: 我們繼承了父親的姓
CSS中的繼承: 子標(biāo)簽會繼承父標(biāo)簽的某些樣式,如文本顏色和字號。簡單的理解就是:子承父業(yè)。
恰當(dāng)?shù)厥褂美^承可以簡化代碼,降低 CSS 樣式的復(fù)雜性
子元素可以繼承父元素的樣式(text-,font-,line-這些元素開頭的可以繼承,以及color屬性)
繼承性口訣:龍生龍,鳳生鳳,老鼠生的孩子會打洞。
行高的繼承性
body { font:12px/1.5 Microsoft YaHei; }
注意:
行高可以跟單位也可以不跟單位
如果子元素沒有設(shè)置行高,則會繼承父元素的行高為 1.5
此時子元素的行高是:當(dāng)前子元素的文字大小 * 1.5
body 行高 1.5 這樣寫法最大的優(yōu)勢就是里面子元素可以根據(jù)自己文字大小自動調(diào)整行高
3.優(yōu)先級
優(yōu)先級的選擇器權(quán)重如下表所示。
優(yōu)先級注意點:
1. 權(quán)重是有4組數(shù)字組成,但是不會有進位。
1. 可以理解為類選擇器永遠大于元素選擇器, id選擇器永遠大于類選擇器,以此類推..
2. 等級判斷從左向右,如果某一位數(shù)值相同,則判斷下一位數(shù)值。
3. 可以簡單記憶法: 通配符和繼承權(quán)重為0, 標(biāo)簽選擇器為1,類(偽類)選擇器為10, id選擇器100, 行內(nèi)樣式表為1000, !important 無窮大.
4. 繼承的權(quán)重是0,如果該元素沒有直接選中,不管父元素權(quán)重多高,子元素得到的權(quán)重都是0。
權(quán)重疊加:如果是復(fù)合選擇器,則會有權(quán)重疊加,需要計算權(quán)重。
div ul li ------> 0,0,0,3 .nav ul li ------> 0,0,1,2 a:hover -----—> 0,0,1,1 .nav a ------> 0,0,1,1
猜你喜歡: