CSS的三大特性

2021-09-29 12:32:08 字數 1094 閱讀 4503

1,層疊性

當相同選擇器為某個元素設定了相同屬性時,如先給乙個盒子設定了紅色的背景色,後面又給它設定了綠色的背景色,此時後來設定的會覆蓋掉先前設定的背景色,這就是css的層疊性

div

此時效果圖為

2,繼承性

我們都知道html標籤是存在巢狀關係的,即存在父子關係,而子元素是可以繼承父元素的某些屬性的,並不是所有屬性,如font-,line-,text-開頭的屬性,以及color屬性

"father"

>我是父盒子

"son"

>我是子盒子

.father

.son

此時子元素就繼承了父元素的屬性,父元素字型是斜體,子元素也是斜體。

3,優先順序

前面提到,如果是相同選擇器對元素設定樣式,後面的會覆蓋掉前面的,但是如果是不同選擇器呢?這樣就出現優先順序的問題了,不同的選擇器權重是不一樣的,具體排序如下

!important>行內樣式》id選擇器》類和偽類選擇器》標籤選擇器》繼承或者萬用字元選擇器

注:!important只能控制一行語句,如果要給所有屬性新增最高優先順序,每一句都要加,由此可見比較麻煩

.son
但又出現乙個問題,如果我們使用復合選擇器,此時應該如何去比較權重呢?此時就可以使用具體數值來計算,具體如下

選擇器權重

繼承或萬用字元選擇器

0標籤選擇器

0.001

類和偽類選擇器

0.01

id選擇器

0.1行內樣式

1!important

無窮大舉例,乙個復合選擇器 .box,#land{}的權重計算就是0.11,在使用不同復合選擇器來設定同乙個元素樣式時,可以利用這個公式來計算,比較兩者的優先順序,誰優先順序高就用誰的。

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那裡繼承而來。但是並不是所有的...