明白CSS优先级

总有许多人在写css时会很奇怪:“为什么我的样式没有语法错误就是显示不出来呢?”在非浏览器原因的情况下一般都是选择器的优先级问题。尽管css选择器有许多组合,但我们仍有一定的规律来识别它们的优先级,毕竟浏览器也是通过一定的方式计算后来决定采用哪种样式进行渲染的。

来源不同,比较来源

对于不同源样式文件,除了important声明外,作者定义>用户定义>用户代理,更为详细的优先级顺序如下,从上到下依次增高:
user agent stylesheet
user declarations (normal)
author declarations (normal)
author declarations (!important)
user declarations (!important)

来源相同,比较Weight

对于同源文件,我们会根据特殊值weight来判断。我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。
4个等级的定义如下:
A等:代表内联样式,如: style=””,权值为1000。
B等:代表ID选择器,如:#content,权值为100。
C等:代表类,伪类和属性选择器,如.content,权值为10。
D等:代表类型选择器和伪元素选择器,如div p,权值为1。
Weight = nA + nB + nC + nD (其中n为该选择器的个数)。
Weight越大,则优先级越高。

来源相同,Weight相同,比较顺序

声明靠后者覆盖靠前者。