《CSS实战精粹》读书笔记（四）
CSS中的每条规则都具有基于它自己的选择符的组成，它在样式表中的位置及这个样式表相对于其他样式表的位置的优先级值。
今天我们就来简单了解一下CSS样式规则中，优先级的概念。简单说，所谓优先级就是说样式中有重复定义时谁是老大，到底听谁的。
CSS优先级的简单规则
在古惑仔中，谁的拳头大听谁的。在CSS中也有一条简单的规则：
选择符越具体，优先权越高；越是一般的选择符，优先权越低。伪元素和伪类分别看作是正常的元素和类选择符。
按照具体的顺序来排序：如果两个声明具有相同的权重，来源和优先权，那么后面的一个要比前面的一个重要，导入样式表中的声明比样式表本身中的任何声明都要靠后。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Css 优先级</title>
<style>
p{color:blue;}
p{color:red;}
</style>
</head>
<body>
<p>这只是一个p标签，我想知道我到底是什么颜色呢?</p>
</body>
</html>
后面的样式覆盖了前面定义的
另外，@import的使用一定要放在除@charset之外的所有样式声明前，否则浏览器不会对导入的样式文件做http请求，样式也就没有意义。本文不做过多讨论，有兴趣的朋友可以去这里查一下资料：W3C 关于 import的使用说明
CSS 评分机制
一条规则的优先级来自于它选择符每一部分的“得分”，而这个分数则是根据每种类型选择符的重要性来判定的，下面的排列是从最不重要到最重要：
元素选择符（包括伪元素选择符） < 类选择符 （包括我和伪类选择符） < ID 选择符 < 行内样式
书中给了我们一个选择符的优先级分数表，这个表用到的html实例代码就不展现给大家了，因为这张表只是告诉我们评分的规则：
css计算选择符的优先级
我们拿表中最后一行来举例吧，该行选择符用的是 div#content p 其中有两个元素选择符，分别是 div 和 p这两个。还有一个是 id 选择符就是content所以其得分如下：ID选择符得分为1，元素选择符得分为2，总得分为 0102。这里千万不要把这些分值做十进制加法哦。
优先级中的例外
凡事都有例外，CSS中的优先级也是，大的规则跟上面的走，但是在一些特殊情况下，优先级也是有所变化的。这里的特殊情况主要指的行内样式及 !important 声明。
在没有 !important 声明时，行内样式的优先级为最高，这是一条简单的规则。所以我们调试页面的时候，偶尔会写一些行内样式来调试代码。
那么 !important 规则又有什么用呢？在这里我们先不考虑IE6浏览器。
一条规则中的 !important 声明会替代任何具有同等甚至是更高优先级规则中的相同属性，除非在样式表的某个地方还有另外一条优先级较高的规则中也含有 !important 声明。
也就是说，当样式表中，同一个元素的多个选择器内，都含有 !important 规则时，那么和上面的一样，下面定义的样式才是真正起作用的那个。然而，如果只有一个 !important 声明时，那么无论这个声明是放在上面还是下面，下面覆盖他的，同样样式的规则以 !important 为主。
来简单看一个例子加深一下我们的印象吧：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Css 优先级</title>
<style>
p{
color:blue !important;
font-size:16px;
}
p{
color:red;
font-size:20px;
}
</style>
</head>
<body>
<p>这只是一个p标签，我想知道我到底是什么颜色呢?字体多大？</p>
</body>
</html>
css中!important秒杀
看到了吧，虽然颜色为蓝色的样式规则定义在上面，下面有红色的样式规则覆盖它，但是由于上面的规则含有 !important 规则，下面的样式被秒杀了。
因为我现在在 UBUNTU 下面，所以关于IE的问题没法证明，但是查了一些资料：Pro CSS Techniques 读书笔记（三），也是一样写这本书的读书笔记的哥们是这样写的：
!important 有时会用在跨浏览器的 hack 上，导致一些人认为 IE6 不识别 !important，而 firefox 和 IE7 识别，那就错了。IE6/7 及 Firefox 都识别 !important，只是 IE7 及 Firefox 尊重 !important 最高优先权，而 IE6 虽然识别到了 !important，但如果后面包含相同属性的样式，还是会将 !important 的风格覆盖掉
另外，W3C中关于 !important 的规则描述在这里：http://www.w3.org/TR/CSS2/cascade.html#important-rules有兴趣的同学可以自己去看一下，呵。
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2010/03/21/1734/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
我刚意外发现你居然还有个“老小子”的域名……
[回复]
@一天一歌
呃。你眼睛还真是贼啊。。 :shock:
[回复]
@simaopig
就当图床使啊？感觉闲置的浪费啊……
[回复]
@一天一歌
呵，暂时没想好弄啥呢。就是喜欢这个域名就买下来了。呵。 :grin:
有啥好建议说说吧。哈。
[回复]