css优先级由选择器的权重决定，权重越高样式越优先。权重计算分为四位：内联样式1,0,0,0，id选择器0,1,0,0，类/属性/伪类选择器0,0,1,0，元素/伪元素0,0,0,1；常见对比如p(0,0,0,1)、.class(0,0,1,0)、#id(0,1,0,0)；权重相同时后写的生效；!important可强制覆盖但应谨慎使用；内联样式优先级最高但应避免滥用；少用id以减少覆盖问题。
CSS选择器的优先级决定了当多个规则作用于同一个元素时，哪一个规则会被应用。很多人在写样式的时候会遇到“为什么我的样式没生效”的问题，其实大多数时候都是优先级的问题。理解CSS选择器的权重计算规则，能帮你更高效地控制样式覆盖顺序。
什么是CSS优先级？
每个CSS选择器都有一个对应的“权重”，浏览器根据这个权重来判断哪个样式应该被最终应用。权重越高，优先级越高。如果两个规则冲突，权重高的那个就会胜出。
优先级是由选择器的类型和数量决定的，不是靠书写顺序或样式表的位置。
立即学习“前端免费学习笔记（深入）”；
权重是如何计算的？
CSS优先级是通过一个四位数（有时简写为三位）来表示的，从高到低分别是：
内联样式：1,0,0,0ID选择器：0,1,0,0类选择器、属性选择器、伪类：0,0,1,0元素选择器、伪元素：0,0,0,1通用选择器、否定伪类等不影响权重
举个例子：
腾讯Effidit
腾讯AI Lab开发的AI写作助手，提升写作者的写作效率和创作体验
65 查看详情
/* 权重：0,1,1,1 */#main .content p { color: red;}/* 权重：0,0,1,3 */div.content p span { color: blue;}
虽然第二个选择器更长，但它的权重比第一个低，所以第一个规则会生效。
常见选择器的权重对比
下面是一些常见选择器的权重对比，帮助你快速判断谁更高：
p → 0,0,0,1.class → 0,0,1,0#id → 0,1,0,0p.class → 0,0,1,1p#id → 0,1,0,1div ul li > p → 0,0,0,4[type="text"] → 0,0,1,0:hover → 0,0,1,0::before → 0,0,0,1
可以看出，只要有一个ID选择器，基本就能压过很多其他组合。这也是为什么我们常说“少用ID写样式”的原因之一。
!important 和内联样式的特殊处理
!important 是一种强制覆盖机制，但它不属于选择器本身的优先级系统。它更像是一个“作弊手段”。如果你滥用它，后期维护会变得非常困难。内联样式的优先级是最高的（除非遇到带 !important 的规则），所以尽量避免使用 style="..."，除非确实有需要动态控制样式的情况。
一些实际中需要注意的地方：
两个规则权重相同的情况下，后写的那个生效使用 !important 要谨慎，只在必要时使用，比如覆盖第三方库的样式ID选择器很容易造成样式难以覆盖的问题，建议多用类名代替
基本上就这些。优先级听起来有点复杂，但只要你记住不同选择器的权重级别，并在开发过程中注意检查样式覆盖关系，就可以避免大部分样式冲突问题。
以上就是CSS选择器优先级详解：权重计算规则的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1097208.html
微信扫一扫 
支付宝扫一扫 
