关于元素优先级
元素的优先级主要受样式名长度和位置影响。
相同长度的情况下,受位置影响:
<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样式文件时,也是会受位置影响的,下面的优先与上面。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步