在讲CSS优先级的优先级之前，我们得要了解什么是CSS，CSS是用来做什么的。
首先，我们对CSS作一个简单的说明：CSS是层叠样式表（Cascading Style Sheets）的简称。它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说，应该很少没有听说过CSS了，因为在制作网页过 程中我们经常需要用到。
其次：我们能通过CSS为文档设置丰富且易于修改的外观，以减轻网页制作者的工作负担，从而减轻制作及后期维护的代价。
其实现在还来讲CSS是什么，CSS有什么作用完全是多余的，相信从事网页制作的朋友都已经或多或少的接触过了。
言归正传，我们开始进入今天的话题：
一、什么是CSS优先级？
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
二、CSS优先级规则
既然有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是本次所需要讲的重点。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1. 统计选择符中的ID属性个数。
2. 统计选择符中的CLASS属性个数。
3. 统计选择符中的HTML标记名个数。
最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数(css2.1是用4位数表示)。( 注意，你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。
例如：
1. 每个ID选择符(#someid)，加 0,1,0,0。
2. 每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。
3. 每个元素或伪元素(:firstchild)等，加0,0,0,1。
4. 其它选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。
三、特性分类的选择符列表
以下是一个按特性分类的选择符的列表：
| 选择符 | 特性值 |
| h1 {color:blue;} | 1 |
| p em {color:purple;} | 2 |
| .apple {color:red;} | 10 |
| p.bright {color:yellow;} | 11 |
| p.bright em.dark {color:brown;} | 22 |
| #id316 {color:yellow} | 100 |
单从上面这个表来看，貌似不大好理解，下面再给出一张表：
| 选择符 | 特性值 |
| h1 {color:blue;} | 1 |
| p em {color:purple;} | 1+1=2 |
| .apple {color:red;} | 10 |
| p.bright {color:yellow;} | 1+10=11 |
| p.bright em.dark {color:brown;} | 1+10+1+10=22 |
| #id316 {color:yellow} | 100 |
通过上面，就可以很简单的看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100，继承的权重为0（后面会讲到）。
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
优先级问题其实就是一个冲突解决的问题，当同一个元素（内容）被CSS选择符选中时，就要按照优先级取舍不同的CSS规则，这其中涉及到的问题其实很多。
说到这里，我们不得不说一下CSS的继承性。
四、CSS的继承性
4.1 继承的表现
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
样式定义：body {color:#f00;}
举例代码：<p>CSS<strong>继承性</strong>的测试</p>
举例效果： 
这段代码的应用结果是：“CSS继承性的测试”这段话是红颜色的，“继承性”几个字由于应用了<strong>标签，所以是粗体。 很显然，这段文字都继承了由body {color:#f00;}样式定义的颜色。这也就是为什么说继承性是CSS的一部分。
然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
我们仍以上面的举例代码为例：在样式定义中添加一条：strong {color:#000;}。
举例效果： 
发现只需要给<strong>加个颜色值就能覆盖掉它继承自<body>的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。
4.2 继承的局限性
继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。
有一些属性不能被继承，如：border, margin, padding, background等。
样式定义：div {border:1px solid #000;}
举例代码：<div>我是<em>border</em>我是不能被继承滴</div>
预期效果： 
实际效果： 
从上面的效果中，我们可以看出，border是不能被继承的，还有一些其它的属性也是如此，这里就不一一列举。
五、附加说明
1. 文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style="color:red">blah</div>的样式，而外部定义指经由<link>或<style& amp; gt;卷标定义的规则。
2. 有!important声明的规则高于一切。
3. 如果!important声明冲突，则比较优先权。
4. 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
5. 由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
6. 关于经由@import加载的外部样式，由于@import必须出现在所有其它规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。
还需要说一下，IE是可以识别位置错误的@import的，但无论@import在什么地方，它都认为是位于所有其它规则定义之前的，这可能会引发一些误会。
优先权问题看起来简单，但背后还是有非常复杂的机制，在实际应用中需要多多留意。
六、练习
看完上面的文字后，来做几道非常简单的题目。（自己答完前，请不要先看各题给出的链接地址哦）
1. 如何让使用两个使用相同样式名的元素具有不同的效果：链接
固定效果： 
固定代码： <div class="test">传说中的测试</div>
<p class="test">传说中的测试</p>
2. 如何让<h3>始终为黑色，而<em>在不被<h3>包含的情况为红色：链接
固定效果： 
固定代码： <h3>讨论<em>CSS</em>优先级< /h3>
<p>讨论<em>CSS</em>优先级</p>
3. 如何写一个外部样式使得<h3 style="color:#000;"> 覆盖我</h3>的颜色为红色：链接
4. 如何让同时具有.a,.b样式的元素只表现.a的颜色样式：链接
固定代码：<p class="a b">传说中滴测试</p>
一、CSS的优先级
1、标有"!important"的规则有最高优先级
一个样式规则可以有一个"important"附带标签，表示该样式规则具有最高优先级。例如下面例子中，前景色被标为important。
H1{color:black !importan; font-family:sans-serif}
注意：这种声明容易引起混乱，因此通常使用得较少。
2、创作者规则优先级高于浏览者规则
浏览器允许浏览者创建样式规则以覆盖系统缺省值。在此情况下，由网页创作者明确设定得样式优先级较高，而浏览者设置得样式规则优先级较低。
3、更特殊得规则优先于不够特殊的规则
在决定特殊性时，selector中的ID属性有最高优先级。基于ID selector的优先级可通过计数Selector中类属性的数量确定，数量越多优先级越高。假如规则仍然无法确定优先级，则HTML元素名的数量决定了特殊性。
4、在同一个级别的情况下，最后指定的规则有优先权
假如两个或更多的规定在应用了前三个规定具有相同优先级，则后给出的规则优先于早先给出的规则。
如果在网页的HEAD标记中同时使用了STYLE标记符（指定嵌入式样式）和LINK标记符（指定链接式样式），并且这两个样式指定中同时应用了具有同一优先级别的样式，则STYLE标记符和LINK标记符的先后顺序将决定样式的优先级。
例如，如果在LINK所链接的样式表（mycss.css）中定义了以下一条样式规则：
H1{color:red}
同时在嵌入式样式定义中也定义了一条规则：
H1{color:yellow}
在网页中的样式定义如下所示：
<HEAD>
<LINK rel=stylesheet href="mycss.css" type="text/css">
<STYLE>
<!--
H1{color:yellow}
-->
</STYLE>
</HEAD>
由 于STYLE标记符中定义的样式后出现，因此它具有更高的优先级，所以网页中H1标记符的内容将显示为黄色（yellow)。同样，如果将Link标记符 的位置移动到<STYLE></STYLE>标记符之后，则网页中H1标记符的内容将显示为红色（red)。
另外，由于直插式样式（使用HTNL标记的style属性设置的样式）的位置最接近于样式作用的标记符，因此它通常具有高优先级。
二、CSS属性单位
由于样式表项就是由属性及其值组成的，因此有必要了解属性值的各种单位。在CSS中，各种单位与在HTML中有所不同，请读者注意区分。
1、长度单位
缩写 单位类型 说明
cm 厘米
em ems 当前字体中m字母的宽度
ex exs 当前字体中x字母的高度
in 英寸
mm 毫米
pc Picas 1 pica=12点
pt 点 1点=1/72英寸
px 象素 显示单位
注意：并非所有浏览器都支持以上长度单位。例如：IE3.x 不支持em和ex单位。NS4.0不支持pc单位。
在以上单位中，需要说明的是em和ex。
“em”所代表的高度就是大写字母“M”（或者“H”）的高度，假设当前使用的字体是12号，那么此时em就是12号。一般情况下，浏览器的默认字体都是 12号。如果更改了默认的字号，则em的值会相应调整。
例如，假设现指定<H1>标记符中的字体大小为1.5em，则浏览器在编译HTML时就会执行下列过程：
(1)读取默认的字号大小值，比如12号；
(2)读取相对的定义值 1.5em;
(3)显示18号字体（12pt X 1.5=18pt)。
可以看出，em单位是基于用户浏览器的默认值来定义的，从而使网页设计者和浏览者都具有对字体大小的控制权--设计者可以指定需要扩大（或缩小）的比例，而真正的显示尺寸则由用户自己挑选。
原创内容！转载请保留作者名字和出处。
fangle，http://www.28star.com/blog/2008/06/06/css-priority.html
CSS(Cascading Style Sheets)样式的最终选择涉及到继承层叠顺序等，就好比人类世界的mozilla和ie家族模式。
[1位重要标志位] > [4位特殊性标志] > 声明先后顺序
注：样式表比html后载入
- 重要声明（!important）
[1位重要标志位]
div{
display:none !important;
display:block;
}
虽然按照顺序应该是使用后声明的display:block;，但是因为!important的缘故，所以最后使用的却是display:none;。
好比现任家族族长。可以定下某一个孩子为继承人，其他人无法反驳，反驳就一段胖揍。 - 正常声明
[4位特殊性标志。点分四段（0.0.0.0），形式类似与ip地址]
有一些老式游览器使用3位特殊标志，也就是4位标示中的前两位合并。
样式表选择器支持类似文档数结构的层级选择，故特殊标志位随定义的选择器层级加权。
（每次给某个标志位加1，不带进位的哦）
优先级从左至右，前一段对后一段具有无可辩驳的压倒性优势。
（后一段就算无穷大也无法战胜前一段的1。）
就像贵族一样，家里有4个孩子，每个人都在成长中学习知识（有点修学分的感觉），自己的知识永远是自己的财富。
众所周知哥哥总比弟弟有一定的优势，不论地位或权利。
尤其在于次子们再优秀也无法替换长子接管家族，想篡位的时候可以只能让哥哥们消失了，嘿嘿。- 创作人员正常声明
- 内联样式[1.0.0.0]
在html文档的元素中直接插入样式的
就是在第一位标志位加1
<div style=”display:none;”></div>
在ie6中此优先级与id选择器同级
族长的第一个孩子，不论好坏，出生就被内定为家族继承人。
注：有特殊情况，ie6之前只有三位特殊标志位，内联样式[1.0.0]被合并到id选择器中[1.0.0]，且因为css文档比html后载入，所以后声明的会覆盖前面声明的。
话说ie家族早年平定邪教的时候中了一个邪恶的诅咒：六子之长子。
说的是一个持续了6代的诅咒，其中每代的长子必活不过家中第二个孩子成年之日。
不过我觉得这个诅咒下的比较仓促，所以诅咒只在长子和家中第二个孩子间发生，和其他孩子没关系，所以只要舍弃第二个孩子就可以了。 - id选择器[0.1.0.0]
就是在第2位标志位加1
应用于对应id的元素，css中用“#”后跟id来标记。
#header{
display:none;
}
<div id=”header“></div>
二儿子虽不是第一继承人，当至少可以去当Identity主管（用这个世界的话说就是做做人事管理，hr），毕竟偌大一个家族的人都需要管理。 - 类（属性，伪类）选择器[0.0.1.0]
就是在第3位标志位加1- 类选择器
应用于对应class的元素，css中用“.”后跟class名来标记。
.header{
display:none;
}
<div class=”header“></div>
三儿子权利更小，分配去当家族采购主管了，肥水不流外人田吗。 - 属性选择器
属性选择器应用于对应class的元素，css中用“[]” 标记中html元素属性名来标记。
div[title]{
display:none;
}
<div title=”any”></div>
地位越高，他的直系下属地位也比一般人高。
俗话说：天高皇帝远，县官不如现管。怕就怕他的狗奴才仗势欺人狐假虎威。 - 伪类选择器
LVHA伪类,样式按LVHA优先级顺序从右至左覆盖。所以要注意一下这4个伪类的声明顺序，不同的顺序会产生不同的效果。
a:link - 默认链接样式
a:visited - 已访问链接样式
a:hover - 鼠标悬停样式
a:active - 鼠标点击样式
现在终于要说道真正的祸国殃民的牛鬼蛇神了，排名前4为的金牌打手了。要对付他们先从最弱的开始，柿子捡软的捏。
- 类选择器
- 元素（伪元素）选择器[0.0.0.1]
就是在第4位标志位加1- 元素选择器
应用于所有对应的html标签，css中直接使用html元素标记
div{
display:none;
}
<div></div><div></div> - 伪元素选择器
:first-letter - 首字母样式
:first-line - 首行样式
四儿子其实被排挤的不行了，每天就干一些表面的事情，小铺开张剪个彩啦，出席一些小应酬啦，浑浑噩噩的度过一生。
- 元素选择器
- 通配符选择器[0.0.0.0]
就是在第4位标志位加0，不要小看这个0啊。
应用于所有匹配的样式，类似模糊匹配，*号就是什么都可以啦。
div *{
display:none;
}
<div><div></div><span></span></div>
这类人其实就是那些家族的旁支了，他们虽然对家族来说是渺小的，但是毕竟还有家族血缘，至少可以当当小掌柜。
看看下面那些人就知道什么叫卑微了。 - 继承样式和结合符[无]
这个连0都不是，简直就是什么都不是，不是东西啦。- 继承样式
p会继承div设置的样式，但没有权重，任何方式给p定义的样式都可以轻易覆盖继承样式
div{
color:red;
}
<div><p></p></div> - 结合符（combinator）
- 后代选择器（descendant selector/上下文选择器contextual selector）
后代结合符（descendant combinator）：空格
空格前后的元素是后代关系。
这么理解它呢？
树结构的分支选择器。
……任何子孙中包含……（可一直嵌套下去，如：div p span）
div span{
display:none;
}
<div><p><span></span></p></div><span></span><div><em></em></div>
空格的左右两边不一定是子元素这样的绝对父子关系；而是父亲和子孙关系，即可以隔N代遗传。
如果有相似两代的话当然有两个选择最接近的一代。如：
两层span，只匹配最接近div的那个span。
div span{
display:none;
}
<div><p><span><h1><span></span></h1></span></p></div> - 子（元素）选择器（child selector）
子结合符：大于号（child combinator）
大于前后的元素必须是父子关系。
div > span {
display:none;
}
<div><span></span></div><div><em><span></span></em></div> - 相邻兄弟选择器（adjacentsibling selector）
相邻兄弟结合符（adjacentsibling combinator）：加号
大于前后的元素必须是同级兄弟关系。
li + li{
display:none;
}
<ol><li></li><li></li><li></li></ol>
- 后代选择器（descendant selector/上下文选择器contextual selector）
这些就是要多少就可以雇佣多少的帮工了，他们没有只管工作，没有什么权利。
- 继承样式
- 内联样式[1.0.0.0]
- 读者正常声明
- 创作人员正常声明
- 用户代理（User agent）[5]声明
一般指游览器。如：
游览器对a元素有默认声明，为蓝色加下划线。
—————————
[1], [3] 名称来自《CSS权威指南》
[2], [4] 名称来自 W3C 中文版
[5] 访问web内容的软件，包括桌面图像浏览器，文字浏览器，语音浏览器，移动电话，多媒体播放器，插件程序，以及一些用来与浏览器联结的软件辅助技术，比如屏幕阅读器，屏幕放大器，语音识别软件等。
[6] W3C CSS标准英文官方网站
[7] 原创作者：fangle，
[8] 原文链接：http://www.28star.com/blog/2008/06/06/css-priority.html
扫一扫
2833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
