在css2.1的规格文档中有明确的写出.
计算选择器的特殊性
一个选择器的特殊性是根据下列(规则)计算的:
- 如果声明来自一个'style'属性而不是一条选择器样式规则,算1,否则就是0 (= a)(HTMl中,一个元素的"style"属性值是样式表规则,这些属性没有选择器,所以a=1,b=0,c=0,d=0)
- 计算选择器中ID属性的数量 (= b)
- 计算选择器中其它属性和伪类的数量 (= c)
- 计算选择器中元素名和伪元素的数量 (= d)
特殊性只根据选择器的形式来定。特殊的,一个"[id=p33]"形式的选择器被算作一个属性选择器(a=0, b=0, c=1, d=0),即使id属性在源文档的DTD中被定义为"ID"
4个数连起来a-b-c-d(在一个基数很大的数字系统中(in a number system with a large base))表示特殊性
一些示例:
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>
上面的示例中,P元素的颜色将是绿色,"style"属性中的声明将重写STYLE元素中的,因为层叠规则3,它的特殊性更高
我大概总结了以下几点:
- 选择器越具体,优先级越高. (记住最基本的:style>id>class>html标签>*)
- 相同优先级,出现在后面的,会覆盖前面的.
- 属性后面加了
!important的优先级最高,但是尽量避免使用.