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選擇器。
以上是一個一個試出來的，錯誤的地方還望指正。