Css优先级分析

原文地址：http://www.denisdeng.com/?p=165
本文节选自《The Ultimate CSS Reference 》一书，翻译不足之处，请斧正，可参考原书：specificity一节。
        
初学者可能对优先级的概念不甚明白，但我们在写css的时候经常遇到这些问题。优先级主要是避免样式声明中的冲突。当针对同一元素的同一属性有多个声明时，并且这些声明来源相同，权重相同，那么，更明确的css声明将占主导地位。

设想下面这个例子：

复制内容到剪贴板

代码:

P{
Color:black;
Background-color:white;
}
div.warning p{
color:red;
}
Div#caution p{
Color:yellow;
}
Body#home div p{
Color:white;
}

上面的样式单中包含四条针对p元素的样式，它们都包含一条针对color的声明，浏览器需要明确那条声明会被最终应用，p元素的最终color是什么？
       
答案很简单，最明确的选择器声明将占据上风，浏览器通过分析选择器的优先级，并最终筛选出优先级最高的声明。

下面是同一选择器多种声明的比较过程：

• 如果是在元素的style中声明元素的属性，而不是在选择器中进行，毫无疑问，它具有最高的优先级。如果没有内联属性，进入步骤2；
  
• 计算选择器的ID，ID数量最多的优先级最高，如果ID的总数相同或者为0，进入步骤3；
  
• 计算类属性（如.test）、属性选择器（如[type=’submit’]）以及伪类 （如:hover）。数量最多的优先级相对较高，如果总数相同或者为0，进入下一步；
  
• 计算类型选择器（如div）和伪元素（如：first-letter）的个数，总数高的优先级高。
  

如果多个选择器具有相同的优先级，根据级联样式单的规则：后来者居上.

W3c讲述了计算优先级的方法，计算结果用四个逗号分开的a，b，c，d矩阵来表示，a中代表的优先级最高，d代表的是最次要，计算过程如下：

• 声明来自style的，a=1;
  
• b，统计ID的个数；
  
• c，统计属性选择器、伪类的个数；
  
• d，统计元素类型和伪类元素的个数。
  

计算结果不是一个具体的数值，而是可以相互比较的矩阵，回想前面例子中的一条声明:

复制内容到剪贴板

代码:

P{
    Color:black;
    Background-color:white;
}

按照上面的公式，我们得到的是0，0，0，1，因为仅一个元素类型。

正如前面所说，这不是数值，而是一个矩阵，a代表最高的优先级，d优先级最低，从左到右，比较每栏的最高值，b栏的值会覆盖c、d中的值，不论c和d中的值是多少。这样，0，1，0，0的优先级将比0，0，10，0高。

我们将计算的步骤拆分开来使之更易于理解。

首先计算a，如果在元素的style中定义其属性，它的值就为1，否则为0，事实上，a栏的值只有一种情况。



你可以看到，内联样式的优先级为1，0，0，0，例如：

引用:

<p style=”color:red;”>red text</p>

这就是问什么尽量避免使用内联样式的原因，因为内联样式总是具有最高的优先级，唯一能改变它的方法是在css中使用！important声明。

除了内联样式，我们需要计算b，c，d。看看下面这条规则的优先级计算：

复制内容到剪贴板

代码:

Body#home div#warning p.message{color:red;}

上面的规则用来定义color属性，既然没有内联样式，第一栏a=0，如下表：
                     


计算b栏中的值，统计ID的数量，上面的选择器中，有两个ID：#home和#warning，这样b=2，如下表：



下一步，计算c栏的值，统计类选择器、属性选择器、伪类的个数。（注：[id=”foo”与#foo是不相同的]）

上面的选择器中，有一个类选择器.message，所以c=1，如下表：



最后是d，计算类型选择器、伪类的个数，选择器中有三个：body、div、p，没有伪类元素，所以d=3，如下表:



就此打住，让我们来看一个更为复杂的例子，对于同一个元素有不止一个的color属性，浏览器如何处理，下面是样式单：

复制内容到剪贴板

代码:

p.message{
color:green;
}
#home #warning p.message{
color:yellow;
}
#warning p.message{
color:white;
}
body#home div#warning p.message{
color:blue;
}
p{
color:teal;
}
* body#home>div#warning p.message{
color:red;
}
#warning p{
color:black;
}

用上面的方法来分析这个样式单。稍等，通用选择符“*”和子选择符“>”的优先级是怎样的？答案是他没有任何优先级，在就算中将被忽略，你可以将其当作0来对待。

在不看下面的结果之前，你是否已经分析出了选择器的优先级。

果是根据优先级优先级的高低来排列的：最高的在最上面，最低的屈居于下。你会看到，最上面的两条级别相同，尽管它多了一个通用选择符和子选择符。在这种情况下，后来者将占据上风，如果你在页面中使用上面的样式，你将会看到，p元素的文本字体将会使红色。

你也会看到，p.message优先级低于#waring p。这是初学者经常遇到的问题，他们认为类选择器更具体的匹配一个元素。