理解CSS优先级：别再被权重数字误导了
很多刚学css的朋友都听过这样的说法：行内样式权重是1000，ID选择器是100，类选择器是10，元素选择器是1。那么问题来了：20个类选择器能不能超过1个ID选择器呢？
答案是：绝对不行！
这是一个很常见的误解。CSS权重的计算不是简单的数字相加。今天我们就来彻底搞清楚CSS优先级到底怎么算。
理解权重的本质
CSS权重可以用一个四元组 (a, b, c, d) 来表示，从重要到次要依次是：
a → 行内样式
b → ID选择器
c → 类选择器、伪类、属性选择器
d → 元素选择器、伪元素
千万不要用1000、100、10、1这些数字来记权重，这样很容易算错。
如果觉得四元组太复杂，记住这个顺序就行：行内 > ID > 类 > 元素。
优先级规则详解
基本规则
浏览器默认的样式权重最低，任何自定义样式都能覆盖它
!important 的权重最高，可以覆盖任何样式
权重相同时，后面的样式会覆盖前面的
样式是逐个属性覆盖的，不是整个选择器一起覆盖
看个例子：
.box {
margin: auto;
background-color: red !important; /* 这个最高 */
}
div {
width: 200px;
height: 200px;
}
div {
height: 100px; /* 覆盖上面的height */
}
.box {
margin-top: 50px; /* 只覆盖margin-top */
background-color: yellow; /* 这个不会生效 */
}权重计算的关键
只有同一级别的权重才能相加比较
不同级别之间不能"进位"
这就是为什么20个类选择器也超不过1个ID选择器。类选择器属于c位，ID选择器属于b位，b > c，所以不管多少个类都赢不了ID。
如果用数字10表示类、100表示ID，就会错误地认为：10×20=200 > 100。但实际上不能这样算。
看这个例子：
.box {
color: white;
}
#box {
background-color: blue; /* ID选择器赢 */
}
/* 20个类选择器 */
.box.box.box.box.box.box.box.box.box.box.box.box.box.box.box.box.box.box.box.box {
text-align: right;
background-color: white; /* 这个不会生效 */
}
/* 3个类选择器 */
.box.box.box {
text-align: center;
}混合选择器的比较
当选择器中包含多种类型时，要从高位到低位依次比较。例子：
.box {
background-color: black;
}
#box.box.box {
background-color: green; /* ID + 2个类 */
}
div#box.box {
background-color: blue; /* ID + 元素 + 类 */
}
#box.box {
background-color: red; /* ID + 类，这个生效 */
}比较过程：
都有1个ID（b=1），继续比
第三个只有1个类，比其他两个少，但...
实际上#box.box会生效，因为具体规则比较复杂
实际开发中的建议
避免过度复杂的选择器
不要写像 .header .nav .list .item .link .icon 这样的长链，不仅难维护，权重还高。
保持低权重
尽量使用类选择器，权重低且易于覆盖。
谨慎使用!important
!important 会打乱正常的优先级，应该尽量避免。如果不得不用，记得加注释说明原因。
使用CSS方法论
BEM、SMACSS等方法可以帮助你写出更合理的CSS。
常见问题解答
问：为什么我的样式不生效？
答：很可能被更高权重的样式覆盖了。检查一下是否有ID选择器、行内样式或!important。
问：怎么覆盖别人的样式？
答：如果对方用了ID选择器，你也需要用ID选择器来覆盖。或者使用相同的选择器，但把你的样式放在后面。
问：!important 能解决所有问题吗？
答：不能。滥用!important会导致样式难以维护，应该作为最后的手段。
问：通配符*的权重是多少？
答：通配符的权重是0，但会影响性能，建议少用。
实用的调试技巧
浏览器开发者工具
在Elements面板中可以看到哪些样式生效了，哪些被覆盖了，还会显示每个选择器的权重。从简单开始
先用简单的类选择器，确实需要提高权重时再考虑其他方式。
记住这几个要点
行内 > ID > 类 > 元素
同一级别才能相加比较
!important 权重最高
从高位到低位依次比较
理解了这些，你就能避免大多数CSS优先级问题。最重要的是，别再想着用数字计算权重了，记住选择器类型的优先级顺序就行。
CSS优先级并不复杂，关键是理解它的比较逻辑。多练习、多调试，很快就能掌握。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
