CSS优先级

      在讲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;}

.apple {color:red;}

p.bright {color:yellow;}

p.bright em.dark {color:brown;}

#id316 {color:yellow}

单从上面这个表来看，貌似不大好理解，下面再给出一张表：

选择符

特性值

　　通过上面，就可以很简单的看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100，继承的权重为0（后面会讲到）。

　　按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

　　优先级问题其实就是一个冲突解决的问题，当同一个元素（内容）被CSS选择符选中时，就要按照优先级取舍不同的CSS规则，这其中涉及到的问题其实很多。

　　说到这里，我们不得不说一下CSS的继承性。

　　四、CSS的继承性

　　4.1 继承的表现

　　继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

样式定义：body {color:#f00;} 举例代码：

CSS继承性的测试

　　这段代码的应用结果是：“CSS继承性的测试”这段话是红颜色的，“继承性”几个字由于应用了标签，所以是粗体。 很显然，这段文字都继承了由body {color:#f00;}样式定义的颜色。这也就是为什么说继承性是CSS的一部分。

　　然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

　　我们仍以上面的举例代码为例：在样式定义中添加一条：strong {color:#000;}。

举例效果：

　　发现只需要给加个颜色值就能覆盖掉它继承自的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。

　　4.2 继承的局限性

　　继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。

　　有一些属性不能被继承，如：border, margin, padding, background等。

样式定义：div {border:1px solid #000;} 举例代码：我是border我是不能被继承滴 预期效果： 实际效果：

　　从上面的效果中，我们可以看出，border是不能被继承的，还有一些其它的属性也是如此，这里就不一一列举。

　　五、附加说明

　　1. 文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如blah的样式，而外部定义指经由或

讨论CSS优先级

3. 如何写一个外部样式使得 覆盖我的颜色为红色：链接

4. 如何让同时具有.a,.b样式的元素只表现.a的颜色样式：链接 固定代码：

传说中滴测试

一、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}在网页中的样式定义如下所示：由 于STYLE标记符中定义的样式后出现，因此它具有更高的优先级，所以网页中H1标记符的内容将显示为黄色（yellow)。同样，如果将Link标记符 的位置移动到标记符之后，则网页中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的值会相应调整。例如，假设现指定标记符中的字体大小为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后载入

四儿子其实被排挤的不行了，每天就干一些表面的事情，小铺开张剪个彩啦，出席一些小应酬啦，浑浑噩噩的度过一生。

这些就是要多少就可以雇佣多少的帮工了，他们没有只管工作，没有什么权利。

—————————[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