CSS 的优先级规则很多地方的说法都是错误的, 常见错误说法是 inline CSS > 内部样式>外部样式, 其实并没有这种规定. 真正的 CSS 优先级确定是通过特性值大小确定的, 在特性值大小相同的情况下, 哪个样式出现在最后采用哪个样式.
在大型复杂系统或 CSS 样式太多的情况下, 同一个元素可能有多个 CSS 样式能够指定, 但最终只有一种样式能够真正使用, 这时我们就需要通过特性值大小来确定采用何种样式了.(注: CSS 样式书写推荐使用层级嵌套, 明确的层级嵌套能够更好得给我们希望的元素设置样式, 预防出现奇怪的样式冲突问题).
真正的优先级规则是指:!important> inline CSS> id 选择器> class 选择器> tag 选择器, 假设我们给定 inline CSS 权重为 A,id 选择器权重为 B,class 选择器权重为 C,tag 选择器权重为 D. 那么存在 A>B>C>D 这种关系, 且 n 个 B(C,D)无论怎么加永远小于 A(B,C)的权重.(有意思的是有些选择器 (Firefox 52.0.2 (64 位),IE11 等) 认为 class 选择器的数量大于 255 时会超过 id 选择器, 不过这种情况通常不存在, 没人写那么多选择器). 在判定一个元素使用哪一个样式时 (不包含 inline CSS 且没有! important 的情况下), 先比较多个样式中 A 权重的多少, 如果一样再比较 B, 直到比较到 D 为止, 如果 ABCD 都一样, 使用最后引用的那个样式.(我们通常说内部样式> 外部样式通常是因为内部样式引用顺序在外部样式引用顺序之后, 其实这两种方式根本就没有优先级关系, 只有先后关系).(还有一点, 真正上我们并不区分内部样式和外部样式, 硬要区分的话才做划分).
有个先后顺序确定优先级的比较好的例子: 我们知道 a 标签有四种状态: 链接访问前, 链接访问后, 鼠标滑过, 激活, 分别对应四种伪类: link,:visited,:hover,:active, 并且这四个伪类如果对同一个元素设置同一个属性, 那它们的声明顺序还有一定要求, 一般大家都遵循 "LVHA"(爱恨原则 love hate). 根据 CSS 优先级计算规则, 伪类的特殊性值是 C,4 个伪类的特殊性值相同, 那么后面声明的规则优先级高. 当鼠标滑过 a 链接时, 满足: link 和: hover 两个伪类, 要改变 a 标签的颜色, 就必须将: hover 伪类在: link 伪类后面声明; 同理, 当鼠标点击激活 a 链接时, 同时满足: link,:hover,:active 三种状态, 要显示 a 标签激活时的样式(:active), 必须将: active 声明放到: link 和: hover 之后. 因此得出 LVHA 这个顺序. 这个顺序能不能变? 可以, 但也只有: link 和: visited 可以交换位置, 因为一个链接要么访问过要么没访问过, 不可能同时满足, 也就不存在覆盖的问题.
来源: https://www.cnblogs.com/lauzhishuai/p/10192268.html