CSS学习笔记(四) CSS优先级

原文：http://segmentfault.com/blog/dopppler/1190000002427029

为了解决冲突，确定哪条规则胜出并最终被应用，CSS提供了三种机制：继承、层叠和特指。

1.继承

CSS 中的祖先元素会向后代传递一样东西：CSS属性的值。可以继承的属性相当一部分都个文本有关，比如颜色、字体、字号。然而，也有很多 CSS 属性不能继承，因为继承这些属性没有意义。这些不能继承的属性主要涉及元素盒子的定位和显示方式，比如边框、外边距、内边距。

注意：由于字体和文本样式是可以继承的，所以在使用相对字体单位（如百分比和 em）时要格外小心。如果某个标签的字体大小被设置为 80%，而它的一个后代的字体大小也被设置为 80%，那么该后代中文本最终的字体大小将是 64%（ 80%的 80%）。这有时候可能并不是你想要的结果。

2.层叠

层叠，就是层叠样式表中的层叠，是一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值的多个来源，确定最终使用哪个值。

提示：层叠是 CSS 的核心机制，理解了它才能以最经济的方式写出最容易改动的 CSS，让文档外观在达到设计要求的同时，也给用户留下一些空间，让他们能根据需要更改文档的显示效果（比如整体调整字号）。

2.1 样式来源

以下是浏览器层叠各个来源样式的顺序：

• 浏览器默认样式
• 用户样式表
• 作者链接样式表（按照它们链接到页面的先后顺序）
• 作者嵌入样式
• 作者行内样式

其中，用户 是指有特别需求的用户，例如视障人士，他们可以通过用户样式表，强制浏览器加载的所有网站都以更大的字号，更容易分辨的颜色显示内容。而 作者，就是网页设计师（你）。

浏览器会按照上述顺序依次检查每个来源的样式，并在有定义的情况下，更新对每个标签属性值的设定。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。

2.2 层叠规则

• 层叠规则一：找到应用给每个元素和属性的所有声明。

• 层叠规则二：按照顺序和 权重 排序。

• 层叠规则三：按 特指度（specific）排序。

• 层叠规则四：顺序决定权重。

提示：声明也可以有权重，空格!important 分号( ;)用于加重声明的权重。
例如：p {color:green !important; font-size:12pt;}

3.特指

计算选择符的特指度

• 一个简单的记分规则，即对每个选择符都要按下面的 ICE 公式计算三个值：
  I-C-E（ID-Class-Element）

说明：1.三个字母间的短横线是分隔符，并非减号；2.这并非真正的三位数，只不过大多数情况下把结果看成一个三位数没问题，三位数最大的胜出。

但是，千万得知道 0-1-12 与 0-2-0 相比，仍然是 0-2-0 的特指度更高。

• 针对这个公式的计分办法如下：
  1.选择符中有一个ID，就在I的位置加1；
  2.选择符中有一个类，就在C的位置加1；
  3.选择符中有一个元素（标签）名，就在E的位置上加1；
  4.得到一个三位数。

可以通过下面的例子来理解：

P{}                                   //0-0-1 特指度=1
p.largetext{}                         //0-1-1 特指度=11
p#largetext{}                         //1-0-1 特指度=101
body p#largetext{}                    //1-0-2 特指度=102
body p#largetext ul.mylist{}          //1-1-3 特指度=113
body p#largetext ul.mylist li{}       //1-1-4 特指度=114

在此，每个选择符都比前一个选择符的特指度更高。

4.查理版简单层叠要点

在这个查理版里，只要记住三条规则就够了。这三条规则适合所有情况：

• 规则一： 包含 ID 的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选
  择符。

• 规则二： 如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。

规则一胜过规则二。换句话说，如果选择符更明确（特指度更高），无论它在哪里，都会
胜出。

• 规则三： 设定的样式胜过继承的样式，此时不用考虑特指度（即显式设定优先）。

下面简单解释一下规则三。

比如下面的标记：

<div id="cascade_demo">
  <p id="inheritance_fact">Inheritance is <em>weak</em> in the Cascade</p>
</div>

和下面的规则：

div#cascade_demo p#inheritance_fact {color:blue;}

• 2 - 0 - 2 （高特指度）

会导致单词 weak 变成蓝色，因为它从父元素 p 那里继承了这个颜色值。

但是，只要我们再给 em 添加一条规则 em {color:red;}

• 0 - 0 - 1 （低特指度）

em 就会变成红色。因为，虽然它的特指度低（0-0-1），但 em 继承的颜色值，会被为它明确（显式）指定的颜色值覆盖，就算（隐式）遗传该颜色值的规则的特指度高（2-0-2）也没有用。

---

参考资料

• CSS设计指南