CSS選擇器優先級

1.類的覆蓋順序和應用的時候引用的順序沒關系，覆蓋順序取決於類定義的順序

    例如：

    .a{
        color:red
    }
    .b{
        color:green
    }

 

    由於b晚於a定義，所以b覆蓋a，反之則a覆蓋b

 

 

2.類選擇器優先級大於標簽選擇器；

    例如：

    div{
        color:red
    }
    .div{
        color:green
    }

 

    .div將覆蓋div

3.類選擇器優先級等於純屬性選擇器，誰后定義誰優先級高，例如：

    [data-name='div']{
         color: red 
     }
     .a{ 
         color:blue 
     }

 

    .a將覆蓋[data-name='div']，反之[data-name='div']覆蓋.a

4.類選擇器優先級小於標簽+屬性組合選擇器，例如：

    div[data-name='div']{
         color: red 
     }
     .a{ 
         color:blue 
     }

 

    .a將被div[data-name='div']覆蓋

5.類選擇器優先級小於id選擇器，例如：

    .a{
         color:blue 
     } 
     #div{ 
         color: red 
     }

 

    .a將被#div覆蓋

6.標簽+屬性組合選擇器優先級小於id選擇器，例如：

    [data-name='div']{ 
         color:blue
     }
     #div{ 
         color: red
    }

 

    #div將會覆蓋[data-name='div']

7.標簽選擇器優先級小於id選擇器，例如：

    div{ 
         color:blue
     } 
     #div{
         color: red 
     }

 

    #div將會覆蓋div

8.標簽選擇器優先級小於純屬性選擇器，例如：

    div{ 
         color:blue 
     }
    [data-name='div']{ 
         color: red 
     }

 

    div將會被 [data-name='div']覆蓋

 

綜上所述： 標簽選擇器<類選擇器=純屬性選擇器（先定義會被覆蓋）<標簽+屬性組合選擇器<id選擇器。

 

以上是一個一個試出來的，錯誤的地方還望指正。