内联样式权重最高为1000，ID选择器为100，类/属性/伪类为10，元素/伪元素为1，按四位数比较大小；!important强制生效但慎用；同权重后定义的覆盖先定义的。
CSS选择器的优先级决定了当多个样式规则作用于同一个元素时，哪一个规则会被应用。理解优先级的关键在于掌握不同选择器的权重计算方式，以及它们在冲突时如何比较。
选择器权重的计算方式
每个选择器都有一个权重值，浏览器通过比较这些值来决定使用哪个样式。权重由四部分组成（从高到低）：
内联样式：写在HTML标签中的style属性，如style=”color: red;”，权重为 1000 ID选择器：如#header，每个ID增加 100 类、属性选择器和伪类：如.class、[type=”text”]、:hover，每个加 10 元素选择器和伪元素：如div、::before，每个加 1
权重按“四位数”方式比较，比如 0,1,0,0 > 0,0,10,0，即使后者数值相加更大也不行。
常见选择器权重示例
div → 权重 1 .nav → 权重 10 #main-nav → 权重 100 div.nav#item → 权重 1 + 10 + 100 = 111 style=”color:red” → 权重 1000
即使一个类选择器写了10次，也比不上一个ID选择器的权重。
立即学习“前端免费学习笔记（深入）”；
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情
!important 的特殊地位
在声明后面加上 !important 可以让该样式无视优先级规则，强制生效。但应谨慎使用，因为它会破坏样式的可维护性。
多个 !important 存在时，仍会比较选择器权重 内联样式 + !important 最终胜出
同权重下后来者居上
如果两个规则的权重完全相同，那么后定义的样式会覆盖前面的。这个特性常被用于小范围调整样式，无需修改原始CSS文件。
基本上就这些。优先级不复杂，但容易忽略细节，特别是组合选择器的累加方式。多练习几个例子就能掌握。
以上就是css选择器优先级规则如何理解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1062061.html
微信扫一扫 
支付宝扫一扫 
