07 css的繼承性和層疊性

2022-06-22 19:00:14 字數 1784 閱讀 8575

繼承性

物件導向語言都會存在繼承的概念，在物件導向語言中，繼承的特點：繼承了父類的屬性和方法。那麼我們現在主要研究css，css就是在設定屬性的。不會牽扯到方法的層面。

繼承：給父級設定一些屬性，子級繼承了父級的該屬性，這就是我們的css中的繼承。

記住：有一些屬性是可以繼承下來 ： color 、 font-*、 text-*、line-* 。主要是文本級的標籤元素。

但是像一些盒子元素屬性，定位的元素（浮動，絕對定位，固定定位）不能繼承。

層疊性

層疊性： 權重的標籤覆蓋掉了權重小的標籤，說白了 ，就是被乾掉了

權重： 誰的權重大，瀏覽器就會顯示誰的屬性

誰的權重大？ 非常簡單就是小學的數數。

數：id的數量 class的數量 標籤的數量，順序不能亂。

/*1  0  0 */顯示紅色


#box


/*0  1  0*/


.container


/*0  0  1*/


p
是不是感覺明白了呢？好的，再加深點難度。

<


div 


id='box1' 


class


="wrap1"


>


<


div 


id="box2"


class


="wrap2"


>


<


div 


id="box3"


class


="wrap3"


>


<


p>再來猜猜我是什麼顏色？


p>


div>


div>


div>
view code

#box1 #box2 p


#box2 .wrap3 p


div div #box3 p


div.wrap1 div.wrap2 div.wrap3 p
view code

好的。那麼上面的這個案例大家是否懂了呢？那麼接下來我們繼續看案例

還是上面那個html結構，如果我設定以下css，會顯示什麼顏色呢。

#box2 .wrap3 p


#box1 .wrap2 p
答案是紅色的。結論：當權重一樣的時候 是以後來設定的屬性為準，前提必須權重一樣 。『後來者居上 』。

good,我們繼續看下面的css，你來猜以下此時字什麼顏色？

#box1 #box2 .wrap3


#box2 .wrap3 p
答案是綠色。哈哈，是不是感覺快懵掉了。其實大家只要記住這點特性就可以。第一條css設定的屬性值，是通過繼承性設定成的紅色，那麼繼承來的屬性，它的權重為0。它沒有資格跟我們下面選中的標籤對比。

那大家猜想一下如果都是被繼承來的屬性，那麼字會顯示什麼顏色呢？

#box1 #box2 .wrap3


.wrap1 #box2
view code

小案例證明：權重都是0:那麼就是"就近原則" ： 誰描述的近，就顯示誰的屬性。所謂描述的近，就是選中到最內層的距離越近。

小總結一下：

總結：1.先看標籤元素有沒有被選中，如果選中了，就數數 （id,class,標籤的數量） 誰的權重大 就顯示誰的屬性。權重一樣大，後來者居上

2.如果沒有被選中標籤元素，權重為0。

如果屬性都是被繼承下來的 權重都是0 。權重都是0:"就近原則" ： 誰描述的近，就顯示誰的屬性

07 css的繼承性和層疊性

07 css的繼承性和層疊性 css有兩大特性 繼承性和層疊性 物件導向語言都會存在繼承的概念，在物件導向語言中，繼承的特點 繼承了父類的屬性和方法。那麼我們現在主要研究css，css就是在設定屬性的。不會牽扯到方法的層面。繼承 給父級設定一些屬性，子級繼承了父級的該屬性，這就是我們的css中的繼承...

CSS 繼承性和層疊性

繼承性 有一些屬性，當給自己設定的時候，自己的後代都繼承上了，如color text 開頭的 line 開頭的 font 開頭的。type text css divstyle head 我是段落p 我是段落p 我是段落p div body 不是所有屬性都能夠繼承，如上圖，color屬性會被繼承，但b...

css 繼承性和層疊性

css有兩大特性 繼承性和層疊性 物件導向語言都會存在繼承的概念，在物件導向語言中，繼承的特點 繼承了父類的屬性和方法。那麼我們現在主要研究css，css就是在設定屬性的。不會牽扯到方法的層面。繼承 給父級設定一些屬性，子級繼承了父級的該屬性，這就是我們的css中的繼承。記住 有一些屬性是可以繼承下...