对于CSS（样式）优先级的问题，大家在开发过程中都必然或多或少的遇到过，谈及也不下千万次。要想处理好优先级可能带来的各种不协调和莫名其妙的“反人类”问题，就要重新回到这个问题最基本的层面上，找准根源、认真分析，才能知其所以然，悉症结所在，方能药到病除，与此同时也可以尽可能地少范一些“不太严谨”的毛病和看似“无所谓”的错误。
样式配置方式
网页配置样式的方式无非三种：
- 内联（行内）样式（Inline Style）
- 内嵌样式（Embedding Style）
外联（引用）样式（Linking Style）
P.S. 还有一种是使用@import的方式引入样式
先来简单温习一下其格式：
<tag ... style=" ... "> [</tag>]<style> ... </style><link href=" * .css " rel="stylesheet" type="text/css">@import [ url( ] "* .css " [ ) ]
我们知道，在一般情况下，其优先级是：1>2>3。但由于在网站开发过程中可能存在的诸多原因，会导致样式呈现出非意料之中的效果。这就需要我们通过测试工具来排查样式优先级可能存在的不当。
当然，这些简单的知识大家都已经很熟悉了，没有涉及比较复杂的原理，但很多人也不知其为何究竟如此。下面我们进一步来深入分析一下优先级的问题。
选择器的优先级
外部引用样式的css文件中，由于选择器的层级、格式、次序的不同亦产生样式优先级问题。
优先权(Specificity)
一个选择器的优先权由四个权值组成：
默认值：（0，0，0，0），因选择器不同而权重各不相同
Rule No.1：内联样式权重最高，以（1，0，0，0）表示；
Rule No.2：ID选择器权重次之，以 （0，1，0，0）表示；
Rule No.3：类、属性、伪类选择器，以（0，0，1，0）表示；
Rule No.4：标签和伪元素选择器权重是最基准的，以（0，0，0，1）表示；
Rule No.5：通配符（*）选择器，权重最低，值为0，以（0，0，0，0）表示。
举个栗子:
<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>分析：
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up] {} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */需要注意的是，在样式表中如果添加了” ! important “的字样，则其优先级最高，优先级顺序变为：
! important > 内联样式 > ID > Class | 伪类 | 属性 > 标签 | 伪元素 > 继承 > 通配符
还是那句老话：多看文档。多浏览几遍W3的文档，就会对这一问题豁然开朗了。
详细说明请查阅：W3 Cascade Rules & W3 CSS
用户样式
以上所谈到的都是基于网页开发者的角度而编写的CSS，故此来源亦可称为“作者”样式（Author StyleSheet）。但样式如果就从用户的角度来谈，一般还需考虑另外两种样式来源：“读者”样式（User StyleSheet）、用户代理样式（User Agent StyleSheet）。
读者，即浏览网页的用户，可以通过一些手段来修改HTML页面元素的样式（Firefox的 Firebug）
用户代理，通常指浏览器，一些浏览器可以通过设置选项来修改页面元素的样式。
以上优先级可以大致概为：
User declarations（!important）> Author declarations（!important）>
Author declarations（normal）> User declarations（normal）> User Agent stylesheet
具体描述请参考：用户样式优先级
因此，按照来源排序，其样式的优先级为：
用户设置的重要样式。
作者编写的重要样式。
作者编写的一般样式。
用户设置的一般样式。
浏览器设置的样式。
P.S. 注意，一些用户样式在 FF、IE 上的渲染效果会有所不同。
综上，可以总结出以下适用性规则：
- 选择器的权重由四项数值累加，故权值越大越优先；
- 当权值相等时，越后出现的样式越优先。继承样式将被后面指定的样式所替换；
- 创作者规则高于浏览者：开发者设置的CSS优先权高于浏览器所设置；
- 同一对象所配置的样式中含“!important”标记的优先级最大。
1431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
