前端css優先順序以及繼承

2022-03-23 09:22:56 字數 4099 閱讀 8004

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

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

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

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

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

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

權重大小比較方法:

樣式表中的特殊性描述了不同規則的相對權重,它的基本規則是:

1 內聯樣式表的權值最高               style=""------------1000;

2 統計選擇符中的id屬性個數。       #id --------------100

3 統計選擇符中的class屬性個數。 .class -------------10

4 統計選擇符中的html標籤名個數。 p ---------------1

按這些規則將數字串逐位相加,就得到最終的權重,然後在比較取捨時按照從左到右的順序逐位比較。

例1:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

<

style

>

/*1 0 0

*/#box

/*0 1 0

*/.container

/*0 0 1*/p

style

>

head

>

<

body

>

<

p id

="box"

class

="container"

>

趙雲是什麼顏色

p>

body

>

html

>

例2

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>document

title

>

<

style

>

/*2 0 1

*/#box1 #box2 p

/*2 1 1

*/#box1 #box2 .wrap3 p

/*0 3 4

*/div.wrap1 div.wrap2 div.wrap3 p

/*3 0 1

*/#box1 #box2 #box3 p

style

>

head

>

<

body

>

<

div

id='box1'

class

="wrap1"

>

<

div

id="box2"

class

="wrap2"

>

<

div

id="box3"

class

="wrap3"

>

<

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

p>

div>

div>

div>

body

>

html

>

例3:權重相同處理

當權重一樣的 後來者居中 

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>document

title

>

<

style

>

#box2 .wrap3 p

#box1 .wrap2 p

style

>

head

>

<

body

>

<

div

id='box1'

class

="wrap1"

>

<

div

id="box2"

class

="wrap2"

>

<

div

id="box3"

class

="wrap3"

>

<

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

p>

div>

div>

div>

body

>

html

>

例4:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>document

title

>

<

style

>

/*繼承的權重是0

*//*

#box1 .wrap2

#box2 .wrap3 p

*//*

權重為0。就近原則 誰描述的近

*//*

#box1 .wrap3

#box1 .wrap2

*/#box1 .wrap2 .wrap3

.wrap1 #box2 .wrap3

style

>

head

>

<

body

>

<

div

id='box1'

class

="wrap1"

>

<

div

id="box2"

class

="wrap2"

>

<

div

id="box3"

class

="wrap3"

>

<

p style

=''>再來猜猜我是什麼顏色?

p>

div>

div>

div>

body

>

html

>

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

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

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

3.繼承來的,描述的一樣近,數權重

4.繼承來的,描述的一樣近,權重一樣,後來者居上

css 繼承,層疊,優先順序

1,繼承,父親黃種人,孩子也為黃種人 兒子繼承父親 父親為 color red 子元素,也為color red 子元素不要勞作就有了,子元素什麼有沒有做,我就有了父元素的值 2,但是 width,不叫繼承,叫可以獲取 子元素可以獲取父親的width 父親寬度為100px。子元素不寫寬度,那麼,照樣沒...

CSS權重以及優先順序

權重的級別劃分包含了所有的css選擇器 如果兩個選擇器作用在同乙個元素上,則權重高者生效 權重的級別根據選擇器被分為四個分類 行內樣式,id,類和屬性,以及元素。當很多規則都被應用到某乙個元素上時,全中決定了那種規則生效。每個選擇器都有自己的權重。每個css規則,都包含了乙個權重級別。如果兩個選擇器...

css層疊,繼承,優先順序筆記

css三大特徵 層疊 層疊是指樣式層疊,是瀏覽器處理衝突的能力。如果乙個屬性通過兩個或多個相同的選擇器設定了同一元素的不同樣式,這是就會出現衝突,瀏覽器會以最後的樣式為準。ps 要是不同的選擇器設定了同一屬性的不同樣式就要比較選擇器的優先順序問題.css層疊特性 上述 中先後通過div元素選擇器對顏...