css的三大特性繼承性,層疊行,優先順序

2022-09-06 18:57:11 字數 1936 閱讀 2189

1、繼承性

#

1、定義:給某乙個元素設定一些屬性,該元素的後代也可以使用,這個我們就稱之為繼承性

#2、注意:

1、只有以color、font-、text-、line-開頭的屬性才可以繼承

2、a標籤的文字顏色和下劃線是不能繼承別人的

3、h標籤的文字大小是不能繼承別人的,會變大,但是會在原來字型大小的基礎上變大

ps:開啟瀏覽器審查元素可以看到一些inherited

from

。。。的屬性

#3、應用場景:

通常基於繼承性統一設定網頁的文字顏色,字型,文字大小等樣式

"en

">"#

">偶的博愛

aaaa

bbbb

示例

示例2、層疊性

#

1、定義:css全稱:cascading stylesheet層疊樣式表,層疊性指的就是css處理衝突的一種能力,即如果有多個選擇器選中了同乙個標籤那麼會有覆蓋效果

#2、注意:

1、層疊性只有在多個選擇器選中了同乙個標籤,然後設定了相同的屬性,

才會發生層疊性

ps:通過谷歌瀏覽器可以檢視到,一些屬性被劃掉了

"en

">class="

ppp">我是段落

示例3、優先順序

#

1、定義:當多個選擇器選中同乙個標籤,並且給同乙個標籤設定相同的屬性時,如何層疊就由優先順序來確定

#2、優先順序

整體優先順序從高到底:行內樣式》嵌入樣式》外部樣式

行內樣式並不推薦使用,所以我們以嵌入為例來介紹優先順序

1、大前提:直接選中 > 間接選中(即繼承而來的)

#

1、以下為直接選中#

2、以下為間接選中

實列2、如果都是間接選中(繼承),那麼誰離目標標籤比較近,就聽誰的

"en

">

示例3、如果都是直接選中,並且都是同型別的選擇器,那麼就是誰寫的在後面就聽誰的

"en

">

示例4、如果都是直接選中,並且是不同型別的選擇器,那麼就會按照選擇器的優先順序來層疊

id > 類 > 標籤 > 萬用字元(也算直接選中) > 繼承 > 瀏覽器預設(即沒有設定任何屬性)

"en

">

示例5、優先順序之!important

#

1、作用:還有一種不講道理的!import方式來強制指定的屬性的優先順序提公升為最高,但是不推薦使用。因為大量使用!import的**是無法維護的。

#2、注意:

1、!important只能用於直接選中,不能用於間接選中

2、!important只能用於提公升被指定的屬性的優先順序,其他屬性的優先順序不會被提公升

3、!important必須寫在屬性值分號的前面

"en

">

示例6、優先順序之權重計算

#

1、強調

如果都是直接選中,並且混雜了一系列其他的選擇器一起使用時,則需要通過計算機權重來判定優先順序

#2、計算方式

#1、id數多的優先順序高

#2、id數相同,則判定類數多的優先順序高

#3、id數、class數均相同,則判定標籤數多的優先順序高

#4、若id數、class數、標籤數均相同,則無需繼續往下計算了,誰寫在後面誰的優先順序高

"en

">"

id1"

class="

ccc">

示例

CSS 三大特性 繼承性,層疊性,優先性

乙個頁面中包含在內部的標籤,繼承了外部標籤的樣式。官方解釋 子元素繼承了父元素的樣式。例如可繼承的 font 字型系列屬性 p text 文字系列屬性 等等。不可繼承的很多,涉及到 padding border margin width height 都不可繼承。記憶的建議 你就是記不可繼承,邊框,...

css疊層 CSS三大特性 繼承性 層疊性 優先順序

一 繼承性 給父元素設定一些屬性,子元素也可以使用,這個我們就稱之為繼承性。注意點 並不是所有的屬性都可以繼承,只有以color font text line 開頭的屬性才可以繼承 在css的繼承中不僅僅是兒子可以繼承,只要是後代都可以繼承 繼承性中的特殊性 a標籤的文字顏色和下劃線是不能繼承的 h...

CSS 三大特性(層疊性 繼承性 優先順序)

層疊 繼承 優先順序 是我們學習css 必須掌握的三個特性。所謂層疊性是指多種css樣式的疊加。是瀏覽器處理衝突的乙個能力,如果乙個屬性通過兩個相同選擇器設定到同乙個元素上,那麼這個時候乙個屬性就會將另乙個屬性層疊掉 比如先給某個標籤指定了內部文字顏色為紅色,接著又指定了顏色為藍色,此時出現乙個標籤...