css 繼承性 權重 層疊性問題)

2021-08-28 19:52:37 字數 1955 閱讀 2921

一、一些css3 的選擇器

1.1 兒子選擇器

兒子選擇器就是》:

ie7 開始相容,ie6不相容

div>p{

color: red;

1.2序選擇器

ie8開始相容,ie6,7不相容

選擇第乙個li:

< style type="text/css">

ul li:first-child{

color: red;

選擇最後乙個li:

1.3下乙個兄弟選擇器

+表示

1.4相容問題的介紹

1.瀏覽器相容問題,ie6,ie7都是很低階的瀏覽器,一般就是這兩個瀏覽器的相容問題。

2.瀏覽器的占有率:

二、css的繼承性和層疊性

2.1繼承性

有些屬性,當自己設定的時候,自己的後代都繼承上了,這就是繼承性。

哪些屬性可以繼承?

color、text開頭的、line-開頭的、font-開頭的

關於文字樣式的都可以繼承,所有關於盒子定位的布局的屬性都不能繼承。

2.2層疊性

層疊性:就是css處理衝突的能力。所有的權重計算,沒有任何相容的問題

(1)當選擇器選上了某個元素的時候,那麼要統計權重。

id數量,類的數量,標籤的數量

同樣的都選擇相同的p,權重:

1,1,1

1,0,3

0,3,4

比較的是先id數量,再類數量,後標籤數量。第一種權重大。

如果權重一樣則以後出現的為準。

(2)如果不能直接選中某個元素,權重為零

開始數權重的時候,先要看是不是真的選中了文字所在的最內層。

如果都是0,那麼有乙個就近原則,誰進就聽誰的。

權重大總結:

1)先看有沒有選中,如果選中了,那麼以(id數,類數,標籤數)來計算權重

如果都一樣的大,聽寫在後面的。

2)如果沒有選中,那麼權重是0,如果都是0,就近原則,誰描述的進,聽誰的。

2.3權重問題深入

1.同乙個標籤,攜帶多個類名,有衝突

我是什麼顏色?

我是什麼顏色?

和在標籤中的類名書寫順序無關,之和css的順序有關,

.spe2{

color:blue;

.spe1{

color:red;

結果是紅色的,因為css中red寫在後面,只看css樣式,誰在前面誰在後面。

2.4!important 標記

important是英語重要意思,可以通過語法k:v !important;來給屬性提高權重,這樣的權重是無窮大的。

1)!important提公升的是乙個屬性,而不是乙個選擇器,(前提是都全中)

p{color:red!important; 只寫了乙個!important,所以就字型顏色屬性提公升權重,font-size沒有提公升權重。

font-size:100px;

#paral{

color:blue;

font-size:50px;

綜合來看字的顏色是red,字型大小是50px,因為!importation的權重最大,所以是red,但是#的權重大於標籤的權重,所以字型大小的大小是50px.

2)!important無法提公升繼承的權重,該是0還是0

hahah

有css樣式

div{

color:red!important;

p{color:blue;

由於div是通過繼承性來影響文字顏色的,所以important無法提公升它的權重。權重是0,幹不過p標籤,因為p標籤是實實在在的選擇的,所以字的顏色是藍色。

3)!important不影響就近原則

如果大家都是繼承的,按理說應該按照就近原則,那麼important能不能影響就近原則呢?

回答是:不能,不能給乙個描述的遠的加!important來提高權重。

04 css的繼承性和層疊性,層疊性權重相同處理

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

CSS 繼承性和層疊性

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

css 繼承性和層疊性

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