一、优先级分类
通常可以将css 的优先级由高到低分为6组:
- 第一优先级:无条件有限的属性只需要在属性后面使用! important。它会覆盖页面内任何位置定义的元素样式。IE6不支持该属性。
- 第二优先级:在HTML中给元素标签加style,即内联样式。该方法会造成CSS难以管理,所以不推荐使用。
- 第三优先级:有一个或多个id选择器来定义。例如,
#id{margin: 0}
会覆盖.classname{margin: 3px}
- 第四优先级:有一个或多个类选择器、属性选择器、伪类选择器定义。如
.classname{margin: 3px}
会覆盖div{margin: 6px}
- 第五优先级:有一个或多个类型选择器定义。如
div{margin: 6px}
覆盖*{margin: 10px;}
- 第六优先级:通配选择器,如
*{margin: 6px;}
二、选择器的权重及优先规则
在css中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于一般选择器的规则。入股两个规则的特殊性相同,那么后定义的规则优先。
那么如何计算选择器的特殊性呢?那就要用到选择器的权重计算了。计算规则如下图:
我们把也属性分为4个等级,每一个等级代表一类选择器,每个等级的值相加得出选择器的权重。
4个等级的定义如下:
- 第一等级:代表内联样式,如style=“”,权值为1000
- 第二等级:代表ID选择器,如#content,权值为100
- 第三等级:代表类,伪类和属性选择器,如.content,权值为10
- 第四等级:代表标签选择器和伪元素选择器,如div p,权值为1
注意:通用选择器(*),子选择器(>),和相邻同胞选择器(+)并不在这个等级中, 所以他们的权值为0
如上图,真个选择器表达式的特殊值为113
三、优先级不起作用
如果遇到了似乎没有起作用的css规则,很可能是出现了特殊性冲突。这时可以在选择其中添加他的一个父元素的ID,从而提高它的特殊性,如果这能解决问题,就说明样式表中其他地方很可能有更特殊的规则,他覆盖了你的规则,此时需要检查代码,解决特殊性冲突,让代码尽可能的简洁。