css 的三大特性 繼承,層疊,優先級

 css的三大特性 繼承,層疊,優先級



1.css 的繼承

   (1).繼承:某個屬性從父元素傳遞到子元素的機制
   (2).繼承的意義:不用爲每個元素指定的屬性,簡化了代碼,若不需繼承屬性,覆蓋即可
   (3).什麼元素可以繼承屬性?  除了<html>(根元素)都有,因爲只要它無父元素。
   (4).哪些屬性可以繼承?   思考一下就知道,比如backgroun-color屬性。


    CSS 中有很多屬性是可以繼承的,其中相當一部分都跟文本有關,比如顏色、字體、
    字號。然而,也有很多 CSS 屬性不能繼承,因爲繼承這些屬性沒有意義。這些不能
    繼承的屬性主要涉及元素盒子的定位和顯示方式,比如邊框、外邊距、內邊距。
   
   繼承性(inheeited),子類可以使用父類的屬性
    注意點:
    (1),不是所有的屬性都可以繼承,只有以color/font-/text-/line開頭的屬性纔可以繼承
    (2),在css中的繼承不僅是兒子纔可以繼承,只要是後代就可以繼承
    (3),css繼承性中的特殊性
    a標籤的文字顏色和下劃線是不能被繼承的
    h標籤的文字大小是不能被繼承的
    應用場景:
    一般用於設置網頁上的一些共性信息

    body{}




2.優先級(詳細講解見上一篇文章)

  
    優先級,當多個選擇器選中同一個標籤時,並且給同一個標籤設置相同的屬性時,如何層疊就由優先級來決定
    判斷條件:
    1,是否是直接選中,就是直接第一次選中的就是要設置的標籤,例如
        p{}
        #identity{}
        .para
    2,間接選中,就是繼承,誰離目標標籤近就會繼承誰的屬性,例如
        ul{}
        li{}
    3,相同的選擇器,如果都是直接選中,並且都是同類型的選擇器,誰在後邊就聽誰的,例如
        p{ }
        p{}
    4,不同選擇器,如果都是直接選中,並且不是同類型的選擇器,那麼就會按照選擇器的優先級來層疊,例如
        id>類>標籤>通配符>繼承>瀏覽器





3.層疊




層疊,就是層疊樣式表中的層疊,是一種樣式在文檔層次中逐層疊加的過程。目的是讓瀏覽器面對某個標籤特定屬性的多個來源時,確定最終使用哪個值。


1.樣式來源
•瀏覽器默認樣式表:因爲你還沒有顯示設置CSS屬性,h1就會顯示粗體,em顯示斜休。
•用戶樣式表:查看網頁的用戶也可以提供樣式表,儘管這樣的用戶不多見,這個選擇對於視障用戶很有用,可以通過用戶樣式表,強制瀏覽器加載的所有網頁都以更大的字體顯示。
•鏈接樣式表
•嵌入樣式
•行內樣式

既然有這樣多的樣式來源,那麼元素到底應該應用哪個樣式中的屬性設定呢,接下來就要了解層疊規則。

 


2.層疊規則


層疊規則1:找到應用給每個元素和屬性的所有聲明。

層疊規則2:按照順序和權重排序。

瀏覽器依次檢查5個來源,並設定匹配的屬性。如果匹配的屬性在下一個來源中也有定義,則更新該屬性的值,如此循環,直到檢查完全部5個來源爲止。最終某個屬性被設定成什麼值,就用什麼值來顯示。



但是有一個另外,就是可以使用"!important"來聲明權重,於是就算層疊的下一個來源設定了其他的屬性值,最終也會使用應用了"!important"聲明權重的樣式。
   

   層疊規則3:按特指度排序。

特指度其實表示一條規則有多明確。

如果某個樣式表中包含如下規則:

p{font-size:12px;}

p.largeText{font-size:16px;}

那麼下面的段落

<p class="largeText">A bit of text</p>

將會顯示16像素高的文本,因爲第二條規則的選擇符既包含標籤名也包含類名,所以意義更明確,結果第二條規則會覆蓋第一條規則中的同名屬性。那麼如何判別哪個聲明特指度更高呢?

 


     三.計算特指度



記分規則 I - C - E,

I代表ID,每個元素的ID是唯一的,所以它的辨識是最高的,比如我說一個身份證號,你肯定知道我在說誰。選擇符中有一個ID,就在I的位置上加1.

C代表Class,代表類別。每個Html文檔中,有許多元素的class屬性會相同,所以辨識度次之。選擇符中有一個類,就在C的位置上加1.

E代表Element,代表元素的種類,比如p、div等,比如我說div你在哪呢,沒有人會知道我在說哪個div。選擇符中有一個元素名,就在E的位置上加1.

在I項得分高的勝出,如果在I項的得分相同,則在C項得分高的勝出,如果在C項得分相同,則在E項得分高的勝出。如果最後I、C、E三項得分都相同,那麼後聲明的規則勝出。元素會應用辨識度最高的CSS屬性聲明。

下面通過幾個例子來理解特指度。

p                                            0 - 0 - 1

p.largeText                              0 - 1 - 1

p#largeText                             1 - 0 - 1

body p#largeText                     1 - 0 - 2

body p#largeText ul.mylist        1 - 1 - 3

 


總結:



1.如果幾個不同來源都爲同一個標籤的同一個屬性定義了樣式,行內樣式勝過嵌入樣式,嵌入樣式勝過鏈接樣式。在鏈接的樣式表中,具有相同特指度的樣式,後聲明的勝過先聲明的。


2.特指度更高的聲明,無論它在哪裏,都會勝出。


3.設定的樣式勝過繼承的樣式,此時不用考慮特指度。



   
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章