CSS中選擇器權重計算的例題

第一題:

3adbe920694d1f9265e8eb42fbbc7a90.png

根據以上代碼,我們來判斷一下P語句中的“文字到底是什麼顏色?

#box1 .spec2 p 這是第一個,根據權重判斷,我們可以看出有一個id選擇器,一個類選擇器,一個標籤選擇器,其權重應該是1,1,1

div div #box3 p 這是第二個,我們可以看出有一個id選擇器,沒有類選擇器,3個標籤選擇器,其權重應該爲1,0,3

div.spec1 div.spec2 div.spec3 p 這是第三個,我們可以看出沒有id選擇器,有3個類選擇器,4個標籤選擇器,權重應該是0,3,4

這三個進行對比,根據權重大小來選擇,選擇權重大的,應是第一個,所以“文字”的顏色應該爲紅色

   24a3501f06463cb2461fea40db76dc68.png


第二題:

69d930900c6e3f3ecb0d6a72d1bb26d4.png

根據以上代碼,我們來判斷一下span語句中的“文字到底是什麼顏色?

看兩個選擇器,看到兩個都未到達span層,所以不根據其權重計算。根據繼承來看,第一個精確到了p,而第二個僅僅是精確到了box,根據就近原則,應是p比較近,所以span語句中的“文字”是紅色的。

第三題:

57a11a54c7503a80f97322967cea06e1.png

根據以上代碼,我們來判斷一下span語句中的“文字到底是什麼顏色?

根據其有沒有到達 span層次來判斷,可以得知是綠色

352672b428b5b02eca2a4991a5e0e462.png

第四題:

e6767ddf2201b785b2b085db743dd7c8.png根據以上代碼,我們來判斷一下P語句中的“文字到底是什麼顏色?

根據逗號是分級選擇器,所以兩部分應該拆開看,再分別計算其權重:

#box1 div.spec2 p ,其權重是1,1,2

#box1 #box2 p,其權重是2,0,1

#box1 #box3 p,其權重是2,0,1

權重一樣根據就近原則,則應該是#box1 #box3 p中的綠色

337f3460cc9ed8f1dc03393a5cb0bb73.png


第五題:

09af25a5e436132ced26d9dd4ce05393.png根據以上代碼,我們來判斷一下P語句中的“文字到底是什麼顏色?

根據不能進位,所以判斷是藍色的。

d80f08a85dba2406eb0d1594ca5203c3.png


第六題:

ac4d97549d2bf5d3cbe166ff10e73b0b.png我們來分析一下代碼裏文字內容的顏色:

根據權重比較,2,0,0、1,1,1、0,2,2可知,應該是第一個,應該爲藍色

a8055e46a902cfa0ce80d936f1c27756.png

第七題:

20f27e7870bedccce6fb860b6c8e725c.png

我們來分析一下代碼裏文字內容的顏色:

第一個是繼承,權重是0;

第二個權重是0,0,1

所以應該是藍色的。

a9ee122e4840a7f3924d20cfe4ba3452.png

第八題:

1ccb1c1652e62b36905ed69717f18443.png

我們來分析一下代碼裏文字內容的顏色:

和第七題相似,應該是藍色的。

第九題:

f431dc247de29c12b3678ac0fed44965.png我們來分析一下代碼裏文字內容的顏色:

第一個權重爲0,0,2

第二個權重爲0,0,1

所以顏色應該是藍色


第十題:

a9ddb03ba1c0419ccca8f387a9b11b08.png

我們來分析一下代碼裏文字內容的顏色:

與上面有類似的,我們可以知道是藍色的。

9a24c9c486cf93314337c91b5dd94814.png


第十一題:

4949de92f6c4c2437c159f87e6901b1c.png我們來分析一下代碼裏文字內容的顏色:

第一個的權重爲1,0,1

第二個的權重爲1,0,0

所以應該是第一個紅色的。

591efd652ca4d66b08db85d42a71810e.png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章