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

2021-09-28 22:04:38 字數 1278 閱讀 1156

css三大特徵

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

css層疊特性

上述**中先後通過div元素選擇器對顏色進行了樣式設定,根據css層疊特性得div元素中文字為red。

繼承性在css中,子標籤會繼承父標籤得某些樣式。恰當的使用繼承特性,可以簡化**,降低複雜性,子標籤可以繼承父標籤得樣式有text-,font-,line-,color,等。

css繼承特性

上述**中通過div選擇器對div元素的顏色設定為red,之後 li 標籤繼承div標籤的color樣式顯示為red。

優先順序在兩個或多個不同的規則應用於同一元素時,會出現優先順序的問題,這時就考慮權重。

1).繼承樣式的權重為0:即在巢狀結構中,不管父元素的權重多少,子元素繼承時權重為 0。

2).行內樣式優先:在應用行內style的元素中,其行內樣式的權重非常高,比各種選擇器的權重 要高。

3).當元素的權重疊加在一起後相同時,則考慮最後的樣式。

4).css中有!important的命令,被賦予了最高的優先順序,出現 !importtant 就會執行。

ps:! important 中的 「!」 不是取反的意思。

附:

下面是乙個簡單的例子:

"blue">

"red" class="blue">css權重

上述**首先有乙個id選擇器定義為red,然後有乙個類選擇器定義為blue;div標籤運用了blue類,

li標籤運用了id選擇器和類選擇器。因為繼承的權重為0,所以只考慮 li 標籤裡面的權重,id選擇器的權重為 0,1,0,0 ;而類選擇器的權重為 0 ,0 ,1 ,0 ;所以 li 元素中的文字應該運用id選擇器

顯示為red

總結:使用 !important

內嵌在行內的style宣告

id選擇器

類選擇器,屬性選擇器,偽類選擇器

元素選擇器

通用選擇器

權重是優先順序的演算法,層疊是優先順序的表現。

我是新手,大佬勿噴,侵刪。

css 繼承,層疊,優先順序

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

CSS層疊(優先順序)

層疊樣式表css最基本的乙個特性就是層疊。衝突的宣告通過層疊進行排序,由此確定最終的文件表示。而這個過程的核心就是選擇器及其相關宣告的特殊性 重要性 及繼承機制。本文將詳細介紹css層疊 選擇器的特殊性由選擇器本身的元件確定。特殊性值表述為4個部分 如 0,0,0,0 下面來介紹不同的選擇器的特殊性...

CSS層疊優先順序

內容提要 如果同個元素有兩個或以上衝突的css規則,瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出。它可能不像其它那麼重要,大部分案例你不需要擔心衝突,但大型而且複雜的css檔案,或有很多css檔案組成的,可能產生衝突。如果同個元素有兩個或以上衝突的css規則,瀏覽器有一些基本的規則來決定哪乙個非...