教育行業A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

CSS的三大特性介紹

更新時間:2021年08月31日13時58分 來源:傳智教育 瀏覽次數:

好口碑IT培訓

CSS 有三個非常重要的三個特性:層疊性、繼承性、優先級。

1. 層疊性

相同選擇器給設置相同的樣式,此時一個樣式就會覆蓋(層疊)另一個沖突的樣式。層疊性主要解決樣式沖突的問題。 

層疊性原則: 

樣式沖突,遵循的原則是就近原則,哪個樣式離結構近,就執行哪個樣式。 

樣式不沖突,不會層疊。

CSS 三大特性:層疊性、繼承性、優先級

CSS 層疊性口訣:長江后浪推前浪,前浪死在沙灘上。

2.繼承性

現實中的繼承: 我們繼承了父親的姓

CSS中的繼承: 子標簽會繼承父標簽的某些樣式,如文本顏色和字號。簡單的理解就是:子承父業。

恰當地使用繼承可以簡化代碼,降低 CSS 樣式的復雜性

子元素可以繼承父元素的樣式(text-,font-,line-這些元素開頭的可以繼承,以及color屬性)

CSS 三大特性:層疊性、繼承性、優先級

繼承性口訣:龍生龍,鳳生鳳,老鼠生的孩子會打洞。

行高的繼承性

body { 
font:12px/1.5 Microsoft YaHei; 
}

注意:
 行高可以跟單位也可以不跟單位

 如果子元素沒有設置行高,則會繼承父元素的行高為 1.5

 此時子元素的行高是:當前子元素的文字大小 * 1.5

 body 行高 1.5 這樣寫法最大的優勢就是里面子元素可以根據自己文字大小自動調整行高

3.優先級

優先級的選擇器權重如下表所示。

CSS 三大特性:層疊性、繼承性、優先級

優先級注意點:

1. 權重是有4組數字組成,但是不會有進位。

1. 可以理解為類選擇器永遠大于元素選擇器, id選擇器永遠大于類選擇器,以此類推..

2. 等級判斷從左向右,如果某一位數值相同,則判斷下一位數值。

3. 可以簡單記憶法: 通配符和繼承權重為0, 標簽選擇器為1,類(偽類)選擇器為10, id選擇器100, 行內樣式表為1000, !important 無窮大.

4. 繼承的權重是0,如果該元素沒有直接選中,不管父元素權重多高,子元素得到的權重都是0。

權重疊加:如果是復合選擇器,則會有權重疊加,需要計算權重。

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




猜你喜歡:

CSS中overflow屬性是怎樣處理溢出內容的?

什么是transform?【CSS transform屬性】

CSS3的三種屬性選擇器介紹

傳智教育前端與移動開發培訓

0 分享到:
红豆直播app黄台_红豆直播app下载免费_红豆直播app下载