css的层叠性和特殊性

在写css中，可能会出现两个或更多规则寻找同一个元素，css通过层叠（cascade）来解决这个问题。层叠给每个规则分配一个重要度。作者的样式被认为是最重要的，其次是用户的样式表，最后是浏览器或者用户代理使用的默认样式表。为了让用户有更多的控制能力，css还提供了！important规则，让它优先于任何规则。

层叠采用以下重要次序：

1，标为!important的用户样式

2，标为!important的作者样式

3，作者样式

4，用户样式

5，浏览器、用户代理应用样式

 

其中用户样式是指web css编写者所写的样式，作者样式是指用户在浏览器里自行设置的样式。这个是我个人的简单理解。

 

然后，根绝选择器的特殊性决定规则的次序，每种选择器被分配一个数字值。将规则的每个选择器的值加在一起计算出规则的特殊性。特殊性的计算不是以10为基数，而是采用一个更高的未指定基数。这样确保非常特殊的选择器（比如ID选择器）不会被大量的一般选择器（比如类选择器）的组合超越。

选择器的特殊性分为四个等级：a b c d

如果样式是行内样式，那么a=1

b=ID选择器的总数

c=类，伪类和属性选择器的数量

d=类型选择器和伪元素选择器的数量

 

                                                           特殊性示例
                              选择器                                     特殊性                   以10为基数的特殊性

                            style=""                                  1,0,0,0                    1000

                           #wrapper #content{}             0,2,0,0                      200
                           #content .dateposted{}         0,1,1,0                      110

                           div#content{}                         0,1,0,1                      101
                           #content{}                             0,1,0,0                       100
                           p.comment .dateposted         0,0,2,1                          21
                           p.comment                             0,0,1,1                          11
                           div p{}                                   0,0,0,2                            2
                          p{}                                          0,0,0,1                            1

特殊性这么多理论，其实实际操作中，AVON只要记得，用style属性编写的规则总是比其他任何规则特殊。具有ID选择器的规则比没有ID选择器的规则特殊，具有类选择器的规则比只有类型选择器的规则特殊。最后，如果两个规则的特殊性相同，则后定义的规则优先。

 

结合这个可以解释下面一个例子

div .box{color:red}    .box{color:black}

<div class="box">我符合div.box和.box规则，计算特殊性，前者是0011，后者是0010，所以显示red</div>