CSS的繼承性和層疊性

2022-04-20 07:41:55 字數 3116 閱讀 5393

css有兩大特性:繼承性和層疊性

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

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

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

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

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

權重: 誰的權重大,瀏覽器就會顯示誰的屬性

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

數:id的數量 class的數量 標籤的數量,順序不能亂 12

3456

78910

1112

1314

/*100*/顯示紅色

#box

/*010*/

.container

/*001*/

p

是不是感覺明白了呢?好的,再給大家加深點難度。12

3456

71

2

3

4再來猜猜我是什麼顏色?</p>

5</div>

6</div>

7</div>12

3456

78910

1112

1314

1516

#box1 #box2 p

#box2 .wrap3 p

div div#box3 p

div.wrap1 div.wrap2 div.wrap3 p

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

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

3456

71#box2 .wrap3 p

4

5#box1 .wrap2 p

答案是紅色的。結論:當權重一樣的時候 是以後來設定的屬性為準,前提必須權重一樣 。『後來者居上 』。

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

3456

7#box1 #box2 .wrap3

#box2 .wrap3 p

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

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

3456

#box1 #box2 .wrap3

.wrap1#box2

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

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

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

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

直接上**,看效果!

第一種現象:當權重相同時,以後來設定的屬性為準,前提一定要權重相同12

3456

7#box2 .wrap3 p

#box1 .wrap2 p

我們會發現此時顯示的是紅色的。

第二種現象: 第乙個選擇器沒有選中內層標籤,那麼它是通過繼承來設定的屬性,那麼它的權重為0。第二個選擇器選中了內層標籤,有權重。

所以 繼承來的元素 權重為0。跟選中的元素沒有可比性。12

3456

#box1 #box2 .wrap3

#box2 .wrap3 p

我們會發現此時顯示的是綠色的。

第三種現象:如果都是繼承來的屬性,誰描述的近,顯示誰的屬性。'就近原則'12

3456

#box1 #box2 .wrap3

.wrap1#box2

!important 的使用。

!important:設定權重為無限大 

!important 不影響繼承來的權重,只影響選中的元素。不要隨便使用!important,因為使用它會影響頁面的布局

CSS 繼承性和層疊性

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

css 繼承性和層疊性

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

前端 css的繼承性和層疊性

css有兩大特性 繼承性和層疊性 繼承性繼承 給父級設定一些屬性,子級繼承了父級的該屬性,這就是我們的css中的繼承,需要注意的是 有一些屬性是可以繼承下來的 color font text line 主要是文本級的標籤元素 像一些盒子元素屬性,定位的元素 浮動,絕對定位,固定定位 不能繼承 層疊性...