CSS选择器优先级如何计算？

这个问题说白了，就是当多条CSS规则都盯上同一个元素时，浏览器听谁的。它有一套内部计分规则，不是谁写在后面就一定赢。

你可以把优先级想象成一个三位数（A,B,C）。A代表行内样式（style=””），B代表ID选择器的数量，C代表类选择器、属性选择器和伪类的数量，D代表元素标签和伪元素的数量。计算时从A到D逐级比较，分高者胜出。

举个例子最直观。假设有这么一段HTML：

<div id="app" class="container main">内容</div>

然后我们写几条CSS：

#app { color: red; }        /* 权重：(1,0,0) */
.container.main { color: green; } /* 权重：(0,2,0) */
div { color: blue; }        /* 权重：(0,0,1) */

最后文字会是红色，因为ID选择器的B位权重最高（1>0）。

但有个“规则破坏者”：!important。把它加在属性值后面，优先级直接跳到最高，但千万别滥用，不然维护起来会是场噩梦。行内样式（A位权重为1）的优先级通常高于外部CSS文件中的选择器。

还有两个容易混淆的点。第一，通用选择器（*）的权重是0，不影响计算。第二，如果A、B、C权重完全一样，那才是“后来者居上”，写在后面的样式生效。

日常开发中，我的建议是：尽量用低权重的类选择器来设计样式，保持规则简单。遇到样式不生效，别急着加!important，先检查一下是不是被更高权重的选择器给覆盖了。理解这套计算逻辑，调试CSS能省下一大半时间。