CSS（二）- 选择器 - 一定要搞懂的选择器优先级和权重问题 - Html/Css

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

css的优先级之前一直没怎么注意没当回事，总以为对同一元素靠后的渲染会覆盖前面的渲染，要是覆盖不了那就来个!important嘛。直到我那在学前端基础的后端伙伴拿一个问题问住了我，我才意识到这是重点中的重点啊！啪啪啪打脸！

优先级关系

先来看css为元素添加样式的几种规则（优先级a>b>c>d，!important无敌）

权重计算

在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法其实是有问题的，但普通情况下这个已足够我们判断，很少情况下会如如下例子这么极端：

比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：权重的进制是并不是十进制，CSS 权重进制在 IE6 为 256，后来扩大到了 65536，现代浏览器则采用更大的数量。

还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100，你可以理解为 99.99，所以最终应用后者样式。