前端 css的繼承性和層疊性

2022-09-15 23:21:14 字數 1309 閱讀 4029

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

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

需要注意的是 有一些屬性是可以繼承下來的: color   ,  font-*  ,  text-*    ,line-*  .  主要是文本級的標籤元素

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

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

權重:誰的權重大,就顯示誰的屬性

如何看待權重呢?

就是數數選擇器個數:     id   class   標籤 

先比較id的數量, 如果id數量不一樣 取數量大的那個屬性,後面的 class和標籤的數量就可以不用比了

層疊性權重相同怎麼處理呢?

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

#box2 .wrap3 p

#box1 .wrap2 p

例子此時顯示的是紅色的

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

標籤,有權重.

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

#box1 #box2 .wrap3

#box2 .wrap3 p

例子此時顯示的是綠色的

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

#box1 #box2 .wrap3

.wrap1 #box2

view code

!important 的使用。

!important:設定權重為無限大 

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

總結:1,先看標籤元素有沒有被選中,如果選中了,就數數(id,class,標籤的數量) 誰的權重大 就顯示誰的屬性,

權重一樣大的,後來者居上

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

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

1

,誰的權重大,就會顯示誰的屬性

2,如果權重一樣大,就會覆蓋

3,如果是繼承下來的屬性, 權重為0,跟選中的標籤沒有可比性

4,如果權重為0,name誰描述的近,就顯示誰的屬性

5,如果權重為0,描述的一樣近,回顧原始狀態,(數權重)

view code

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,css就是在設定屬性的。不會牽扯到方法的層面。繼承 給父級設定一些屬性,子級繼承了父級的該屬性,這就是我們的css中的繼承。記住 有一些屬性是可以繼承下...