css選擇器的權重

概述

如果我們在使用css選擇器的時候,有兩個選擇器同時選中了一個標籤修改樣式,那麼css會決定使用哪一個選擇器定義的樣式呢？

這就涉及到了我們的選擇器權重計算,css會以最高的權重來作為樣式的展現

例子:

下面兩個選擇器都選中了 id為html1的標籤 那麼css會採用哪個值作為展示呢?

     #ol1 > #html1 {
         color: #73d44d;
         background-color: #68aed4;
     }

     #html1 {
         color: #73d44d;
         background-color
 
: #93c1d4;
     }

 

權重計算值

概述

其實css會計算權重(相加),每種選擇器都有不同的權重值,相加得到的權重值,就會比較出哪個大的採用哪個

1. 行內的權重值

1000

<a style="xxx">

2. id選擇器的權重值

100

#test{
...
}

3.class和偽類(其實都是類)

10

.test{
...
}

標籤選擇器

1

a{
...
}

!important 最高權重

10000

使用 !important可以最大化權重,使他比行內還要高,但是important只能定義其中的一個樣式,並且在寫在樣式裡面

       #html1
 
 {
            color: #73d44d !important;
            background-color: #93c1d4;
        }

計算結果

     #ol1 > #html1 {
         color: #73d44d;
         background-color: #68aed4;
     }
     
     上面的權重值為 200

     #html1 {
         color: #73d44d;
         background-color: #93c1d4;
     }
     
     上面的權重值為 100
     
     #html1 > a
 
 {
         color: #73d44d;
         background-color: #93c1d4;
     }
     
     上面的權重值為 101

 

注意事項

1. 每種權重值的最大值只能疊加9次

   不管有多少id權重器在裡面 最大的權重就是 900

        #ol1 > #html1 > #html1> #html1> #html1> #html1> #html1> #html1> #html1> #html1{
            color: #73d44d;
            background-color: #68aed4;
        }
        
        上面的權重值為 900
   
   
    
   
   

   所以說最大的權重值是 999 所以在外面定義的權重值比不過行內就是這個原因

2. 如果兩個地方定義的權重一樣的話,那麼就按照最後定義的權重為準,這個原則使用於 <style>和 <link>混合來使用