CSS經典權重5道題解析

2021-07-14 01:22:33 字數 1810 閱讀 9430

在前端的道路學習過程,css的選擇器的權重的問題知識點是不可避免的。

下面先簡單回顧一下三種常用的選擇器,id選擇器、class選擇器、元素選擇器(type)。一般為了分方便區分三種選擇器的權重,分別以1.0.0、0.1.0、0.0.1來對比這種誰的大小。

之後css樣式中只需要比誰權重陣列大就執行誰,可是真的是只需要比權重大小就可以了嗎?還是說只是在某種情況下才適合比權重?不要著急,相信通過後面的5道題講解。你會對css權重有乙個更深的了解。

看到這一題,想必大家都沒有問題。第乙個樣式權重為1.1.1,第二個樣式權重為1.0.3,第三個樣式權重為0.3.4。

所以此題最後的答案,p為紅色的文字。沒錯,文字的顏色就是紅色。

看到這一題之後,按照第一題的邏輯。第乙個樣式權重0.2.2 第二個樣式權重1.0.0.

所以這一題的文字顏色應該是藍色。

可是最後實際的結果:文字的顏色為red紅色。

可能這裡有同學會抓狂,為什麼比權重的大小乙個行的通,乙個行不通呢?

讓我們重新看看這兩個**

通過**和相關注釋,相信對於權重的理解又加深一點了吧。乘熱打鐵,讓我們馬上進入下一題**。

這一題對比第二種情況更加複雜了,有選中和沒有選中兩種情況。那麼到底是執行那一種規則呢?相信有許多人犯迷糊,不知道如何選擇了。那麼我也不繞彎子,答案:文字最終的顏色為綠色。

具體原因,請看下面的**介紹:

這裡兩個樣式都有選中元素,同時權重的等級大小也相同。那麼文字的顏色到底聽誰的呢?

最後結果顯示,文字顏色為綠色。因為在權重一樣的情況下,誰的樣式排在後面聽誰的。

這裡的**太長了,我就不一一全部截圖下來了。但是通過可以大概看出來結構層,這個文字放在12個div當中。那麼本題就考驗的超過10個標籤權重是否能夠比乙個類名權重更大。

結果:文字的顏色為綠色。

說明了,1.0.0、0.1.0、0.0.1之間關係並不是像平常數學中的10進製一樣,逢10進一。他們之間的進製相差等級很大,至於相差多少。沒有進一步深入去測試研究,因為幾乎沒有誰在實際開發過程當中,巢狀10個以上的標籤。那樣的網頁會臃腫不堪,不利於維護。所以這個僅僅作為乙個參考知識點!有興趣的可以測試一下,目前就我所知道有人測試了255個類能夠大於乙個id選擇器,當然僅僅是在ie瀏覽器情況下測試成功。

最後讓我們對這5道題進行乙個總結:

1、  在考慮瀏覽器執行哪乙個樣式之前,先看樣式有沒有直接被選中。如果直接選中了,按照id數、類數、標籤數來計算權重,誰最後的權重數值聽誰的。如果數值一樣,則誰寫在後面聽誰的。

2、  如果沒有直接被選中,那麼就按照就近原則的方式執行。

好了,以上就是css經典權重5道題解析了。如有寫的不合理的地方,歡迎多多指出。

5 專題一經典問題解析

1 const和引用的疑惑 include int main 2 符號表是編譯器在編譯過程中產生的關於源程式中語法符號的資料結構 如常量表 變數名錶 陣列名表 函式名錶等等 符號表是編譯器自用的內部資料結構 符號表不會進入最終產生的可執行程式中 3 只有用字面量初始化的const常量才會進入符號表 ...

經典問題解析

1 經典問題解析。1 const 什麼時候是常量,什麼時候是變數。2 const 常量的判斷準則。1 只有字面量初始化的 const 常量才會進入符號表,真正意義上的常量。2 使用其他變數初始化的 const 常量依舊是唯讀變數。3 被 volatile 修飾的 const 常量不會被放入到符號表 ...

經典問題解析三

分析 這是乙個多型與陣列物件,及指標運算子之間的問題。1 父類中佔8個位元組,乙個int型別,乙個virtual函式,所以父類輸出8個位元組。2 子類繼承了父類,同時又多個乙個int型別,所以子類佔12個位元組。3 p為父類指標,c為子類指標,p 的步長為8,c 的步長為12。4 所以,當p 後,p...