元素的优先级主要受样式名长度和位置影响。
相同长度的情况下,受位置影响:
<div class="class2 class1"></div>
css:
.class2{color:red}
.class1{color:blue}
这里class1的样式会覆盖class2,因为class2和class1的优先级相同,样式表中最后出现的会覆盖前面的样式。
同一位置受长度影响:
<div class="wrap"> <p class="p1"></p> </div>
长度A:".wrap .p1" 长度B:".p1"
A和B都是指向样式名p1,但是A的长度比B长,所以会覆盖B的样式,也就是说样式名长的元素优先级大。
补充几点点:
1、ID的元素优先级是大于class的元素优先级,成立不受样式名位置和长度影响;
2、在样式属性后面加 !important优先级大于上面任何一种情况;
3、还有种情况就是导入外部css样式文件时,也是会受位置影响的,下面的优先与上面。