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選擇器。

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