【分享】说说标准——层叠顺序(Cascading order)，看看到底哪个样式在起作用？

Web标准化运动的口号——分离、分离、分离。

在2003年的  SXSW  会议（译注：一个关于电影、音乐和交互的会议）中，Steve Champeon和Nick Finck做了一个名为 “ 面向未来的全方位Web设计 ” 的演讲。这样，他们揭示了这种Web开发新方法的蓝图。Steve还给它取了个名称：渐进增强（ Progressive Enhancement ）。

从内容花生开始，将其标记为富含语义的 (X)HTML. 接着给内容裹上一层富含奶油的CSS. 最后，添加JavaScript作为糖果硬壳，这就做成了一颗可口无比的美味（并使得它不会在你手里融化）。
（以上内容来自  理解渐进增强 ）
可见，CSS在其中扮演非常重要的角色。
CSS 是  Cascading Style Sheets  的缩写，即层叠样式表。
那么，直接叫“样式”不就行了么，为什么非要叫做“层叠样式表”呢？
个人感觉，这跟它的一个特性有关，那就是“样式”前面的定语 ---- 层叠。见：W3C CSS 2.1规范中的  6.4 The cascade 。

样式表可能有三个不同的来源：作者，用户和用户端 。

通俗的讲，作者就是开发者，用户就是使用浏览器的人，用户端就是浏览器。
1.  用户端样式 ：来自浏览器的样式，被称作 UA style，是浏览器默认的样式。比如，DIV 元素浏览器默认其“display : block”，SPAN 默认“display : inline”。
2.  用户样式 ：使用浏览器的用户设置的偏好。该样式的设置方式因浏览器不同而不同：
⃟IE：创建一个CSS文件，定义你自己喜欢的样式。
  然后，按如下图示，设置用户样式表，选择浏览，指向自定义样式。

⃟Opera：创建一个CSS文件，定义你自己喜欢的样式。
  然后，按如下图示，设置用户样式表，选择浏览，指向自定义样式。

⃟Firefox：
(1).  找到Firefox的profile ，windows下在这里：用户名\AppData\Roaming\Mozilla\Firefox\Profiles\dbsujefc.default\chrome。可以这样打开：
Firefox 浏览器 帮助----疑难排解信息---应用基础---打开所在文件夹---chrome
(2). 创建一个名为 userContent.css 的CSS文件，编辑加入所需要的样式。注意名字必须叫userContent.css，不能更改。否则无效。
(3). 保存 userContent.css文件然后重启Firefox。
⃟Safari：创建一个CSS文件，定义你自己喜欢的样式。
然后，按如下图示，设置用户样式表，选择浏览，指向自定义样式。

⃟为 Chrome 占位
Chrome定义的地方依然没找到，还希望知道的大侠告知。

感兴趣的童鞋可以用
userContent.css

CSS code

   
   

    
    p
    
    {
    
    
    background-color
    
    :
    
    black
    
    ;
    
    

    
    }
   
   

来试下。
这三个来源来的样式表可能在范围上有重叠。比如，都设置了 P 元素的背景色和字体颜色。它们根据层叠的规则互相作用。
CSS的层叠对每一个样式规则指定一个权重。如果要应用若干个规则，那么权重最大的那个规则具有优先权。
缺省时，作者的样式表规则较用户样式表规则优先级高。不过，对于 "!important" 规则，保留其优先级。所有的用户和作者的规则的权重都比浏览器缺省样式表中规则的权重大。
接下来说一下


"!important" 规则

根据 CSS2.1 规范中的描述，'!important' 可以提高样式的优先级，它对样式优先级的影响是 巨大的。注意，'!important' 规则在IE7以前的版本中是不被支持的。
为了平衡开发者设置的样式和浏览器用户设定的样式，默认开发者的样式优于浏览器用户设置的样式；另外，声明了 '!important' 的样式优于普通声明。   
关于 '!important' 的详细信息，请参考 CSS2.1 规范  6.3 The @import rule  中的内容。
准备工作终于做完了，下面开始介绍本篇的主题，即  6.4.1 Cascading order 的内容。


层叠顺序

为了找到元素/属性组合的值，用户端必须应用如下的排列顺序：
1. 对于目标媒介类型 ( media type )，找到存有疑问的元素和属性的所有声明。如果相关联的选择器匹配存有疑问的元素，并且目标媒介匹配包含声明并且和样式表的路径在所有链接上达到一致的 @media 规则中所有的媒介列表。（直接翻译的，请大家帮忙校对，没用过@media ，所以不大明白这条的意思）
2. 根据CSS样式的来源和重要性(是否含 !important )，给出了优先级的升序排列：
  * 1. 浏览器默认样式；
  * 2. 用户自定义一般样式；
  * 3. 开发者定义一般样式；
  * 4. 开发者定义加了 '!mportant' 的样式
  * 5. 用户自定义加了 '!mportant' 的样式
注：未加 '!important' 的样式为一般样式。
3. 拥有相同重要性和来源的规则，按照 CSS specificity来排序。关于其计算，见我的另一个帖子： 【分享】说说标准 -- 关于样式的特殊性   
此处，需要注意一下层叠顺序和特殊性的关系。特殊性是在相同来源，相同重要性的规则之间用来判定最终哪个规则会起作用。比如， 同是开发者自己定义的样式，并且，没有使用 “!important ” 规则，这样的样式才可以计算特殊性。
4. 最后，根据先后次序来排列：如果两条规则具有相同的权重，相同的来源和相同的特殊性，则后出现的规则超越先出现的规则。引入的样式表( @import )中的规则被认为出现在样式表本身的所有规则之前。

最后，做个实验测试一下上面的标准：
用户自定义样式：
userContent.css

CSS code

   
   

    
    p
    
    {
    
    
background-color
    
    :
    
    black
    
    ;
    
    
color
    
    :
    
    red !important
    
    ;
    
    

    
    }
   
   

按照上面的做法，给浏览器设置用户样式。

test.html

HTML code

   
   

    
    <
    
    style
    
    >
    
    
p
    
    {
    
    
color 
    
    :
    
     green !important
    
    ;
    
    

    
    }
    
    

    
    </
    
    style
    
    >
    
    

    
    <
    
    p 
    
    style
    
    ="background-color : white; color : blue;"
    
    >
    
    
hello!!

    
    </
    
    p
    
    >
   
   

结果应该是怎样的呢？

现在，打开你的浏览器，去证明自己的猜想吧！

原文地址：

http://topic.csdn.net/u/20100705/14/555cd774-8b04-4c10-bada-a184c4a5142d.html?06204550445025669