CSS樣式的繼承性和優先順序

2021-08-30 11:08:44 字數 2417 閱讀 7042

本文主要內容

1.css繼承性

我是段落1

我是段落2

我是段落3

效果圖如下

上方**中,我們給div標籤增加字型紅色屬性,卻發現,div裡的每乙個子標籤

也增加了紅色屬性。於是我們得到這樣的結論:

有一些屬性,當給自己設定的時候,自己的後代都繼承上了,這個就是繼承性。
繼承性是從自己開始,直到最小的元素。

****

我是段落1

我是段落2

我是段落3

效果圖如下

上圖中,我們給div加了乙個border,但是發現只有div具備了border屬性,而p標籤卻沒有border屬性。於是我們可以得出結論:

關於文字樣式的屬性,都具有繼承性。這些屬性包括:color、 text-開頭的、line-開頭的、font-開頭的。

關於盒子、定位、布局的屬性,都不能繼承。

以後當我們談到css有哪些特性的時候,我們要首先想到繼承性。而且,要知道哪些屬性具有繼承性、哪些屬性沒有繼承性。

2.層疊性(計算權值)

下面我就會通過一些實際的例子說明什麼是層疊性

例1.

猜猜我是什麼顏色吧!

注意觀察檢視檢視器右邊的元素

上圖中,三種選擇器同時給p標籤增加顏色的屬性,但是,文字最終顯示的是粉色,這個時候,就出現了層疊性的情況。

當多個選擇器,選擇上了某個元素的時候,要按照如下順序統計權重:

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

因為對於相同方式的樣式表,其選擇器排序的優先順序為:id選擇器 > 類選擇器 > 標籤選擇器

給出以下規則

內聯樣式優先順序1000

id選擇器優先順序100

類和偽類優先順序10

元素選擇器優先順序1

萬用字元優先順序0

繼承的樣式沒有優先順序

針對上面規則,我們接下來舉一些複雜一點的例子:are you ready?go

1.計算權值

猜猜我是什麼顏色吧!

效果圖如下

一定要注意檢視器右邊!!!自己看

2.權值相同時呢?

猜猜我是什麼顏色吧!

從下圖可以看到,第乙個樣式和第二個樣式的權值相同。但第二個樣式的書寫順序靠後,因此以第二個樣式為準(就近原則)。

3.要想實現下列效果應怎麼設計css

具有實戰意義喲,如果是讓第二個變成紅色呢,請自己思考完成

4.若沒有選擇元素呢?

猜猜我是什麼顏色

通過下圖顯示的結果可以看出如果沒有選中元素的話就依據就近原則

5.總結如下

6.下面做幾個例題加強一下,先自己思考結果

1.

我是什麼顏色

我是什麼顏色

我是什麼顏色

我是什麼顏色

第一題是藍色,第二題是紅色,第三題是

CSS樣式優先順序(繼承性 選擇器優先順序)

選擇器的優先順序 css的繼承性指的是應用在乙個標籤上的那些css屬性也會應用到字標籤上。p div 如果div有color red屬性,那麼p也會繼承color red屬性。最近的祖先樣式比其他祖先樣式優先順序高。style color red style color blue class son...

css特性 層疊性,繼承性,優先順序

1.層疊性 多種css樣式的疊加 原則 1.樣式衝突時遵循 就近原則,哪個樣式離結構近,折行哪個 2.樣式不衝突時,不會層疊 口訣 長江後浪推前浪,前浪死在沙灘上 2.繼承性 子標籤會繼承父類的某些標籤,如文字顏色和字型大小 注意 1.前檔的使用繼承可以簡化 建簡化css樣式的複雜度 2.子元素可以...

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

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