CSS三個非常重要的特性分享!

千鋒武漢發表於2021-08-31

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

  1. 層疊性

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

  層疊性原則:

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

  樣式不衝突,不會層疊。

1

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

   2.繼承性

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

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

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

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

2

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

  行高的繼承性

  body {

  font:12px/1.5 Microsoft YaHei;

  }

  注意:

  行高可以跟單位也可以不跟單位

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

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

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

   3.優先順序

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

3

  優先順序注意點:

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

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

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

  4. 可以簡單記憶法: 萬用字元和繼承權重為0, 標籤選擇器為1,類(偽類)選擇器為10, id選擇器100, 行內樣式表為1000, !important 無窮大.

  5. 繼承的權重是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

  以上就是相關的web前端的相關教程,相信大家對css三大樣式已經有所瞭解了。想要了解更多 web前端內容,歡迎大家關注小千,後期會分享更多web前端知識。

  本文來自千鋒教育,轉載請註明出處。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2789595/,如需轉載,請註明出處,否則將追究法律責任。

相關文章