CSS的三大特性

2021-09-10 01:16:38 字數 2727 閱讀 1476

在之前我們提到css樣式發生衝突時的處理方法,比如下面

div

div文字

明顯樣式發生了衝突,最後顯示的文字的顏色是藍色,因為當發生衝突時,後面(以css的書寫順序為準)的衝突樣式會層疊前面的樣式(在權重相同的情況下,關於權重的問題下面介紹)。但是如果

div

div文字

由於字型大小沒有衝突,所有字型大小不會被層疊,字型大小被設定成了25px

我們在前面寫鏈結偽類選擇器的時候,要求按照lvha的順序來,原因就是層疊性。

假設有如下**

.father

"father">

文字

文字會變成紅色,因為p標籤巢狀在.father類裡面,會繼承它的樣式,所以字型顏色是紅色。

假設有下面的**

.father p

p"father">

文字

那麼字型會是什麼顏色呢?如果按照前面的層疊性,字型應該是藍色,但是在層疊性那裡我也有提到,在權重相同的情況下,層疊性才發揮作用,但是因為.father p選擇器的權重比p的權重要高,所以顯示的顏色是紅色。那權重是怎麼一回事呢?

css使用四位來表示權重,比如p的權重是0,0,0,1,.father p的權重是0,0,1,1,左邊為最高位,權重大小的比較就是先比較高位,在高位相同的情況下比較低位,如果權重的大小相同,則按照層疊性的規則。

權重計算的規則如下:

繼承或者*的貢獻值

0,0,0,0

每個元素(標籤)貢獻值為

0,0,0,1

每個類,偽類貢獻值為

0,0,1,0

每個id貢獻值為

0,1,0,0

每個行內樣式貢獻值

1,0,0,0

在上面的例子中p是標籤,其權重為0,0,0,1,.father p是乙個類加乙個標籤,其權重為0,0,1,1,根據權重的比較規則,0,0,1,1大於0,0,0,1,所以.father p的權重更高。

在權重相加時,不能進製,比如十個div,它的權重是0,0,0,10而不是0,0,1,0,所以十個div的權重也沒有乙個類的權重高。

css定義了乙個!important命令,該命令被賦予最大的優先順序。也就是說不管權重如何以及樣式位置的遠近,!important都具有最大優先順序。如下

.father p

p"father">

文字

按照權重,文字應該是紅色,但是由於p標籤使用了!important命令,該命令具有最大優先順序,所以文字是黃色的。這裡需要注意的是,如果是繼承的話,即使加了!important,權重也是0,0,0,0。如

.father

p

文字的顏色會是藍色。

為了更好的理解權重,我們看幾個例子 一

.father

p"father">

文字

.father的權重是0,0,1,0,p標籤的權重是0,0,0,1,但是p標籤是繼承.father的,根據繼承到的權重為0,0,0,0,所以文字的顏色是藍色。 二

#father #son

#father p.c2

div.c1 p.c2

#father

"father" class="c1">

"son" class="c2">

試問這行字型是什麼顏色的?

首先分析樣式時候對這行文字起作用,#father #son使用的是後代選擇器,對這行文字起作用,其權重為0,2,0,0,#father p.c2使用的是後代選擇器和交集選擇器,對這行文字也起作用,其權重為0,1,1,1,div.c1 p.c2使用也是後代選擇器和交集選擇器,對該行文字也起作用嗎,其權重為0,0,2,2,最後乙個是繼承,對該行文字起作用,雖然用了!important,但是其權重還是0,0,0,0,根據權重的比較規則,0,2,0,0的權重最大,所以該行文字的顏色是藍色。

CSS三大特性

css三大特性 1.繼承性 作用 子元素可以繼承父元素的樣式 text font line 這些元素開頭的都可以繼承,以及color屬性 特殊性 1 a標籤的字型顏色不能繼承,必須對a標籤自定義字型顏色才能修改 2 h1 h6標籤的字型大小不能繼承,必須對標籤自身修改字型大小才有效。我是div1中的...

CSS三大特性

樣式具有繼承性,一般有關text line font 都能夠繼承。a標籤的顏色不能繼承 繼承title type text css div1 字型和顏色被繼承偽類但是邊框沒有 style head id div1 這是div1中的內容 id div22 這是div2中的內容 div div body...

CSS三大特性

1.繼承 子代可以直接使用父代的某些樣式 特徵 當然有些可以繼承,有些不能繼承。例 介是div1的內容 介是div1的後代div2中的內容 結果為 div2同樣繼承了div1的樣式。div2雖然沒有設定這樣的樣式,但是實際上卻使用了該樣式。說明它的樣式從它的父代div1那裡繼承而來。但是並不是所有的...