css层叠和继承间的关系

css中元素样式既能从父层继承，也有层叠的规则，那么，如果有如下代码，其在浏览器内会如何显示呢？
.warning { color: red; }
p { color: green; }
<p class=”warning”>层叠和继承的规则如何实现？</p>
此代码在浏览器中的显示为红色，这是由于类选择器“warning”和类型选择器“p”的“特殊性”不同，具体原理如下：
特殊性 （specificity）描述了不同选择器的相对权重（weight）。一个选择器的特殊性是这样计算的：

·如果CSS属性是通过 (X)HTML元素的style属性定义的，则记为a=1，否则记为0；
由于style属性是写在(X)HTML标签内的，因此不存在选择器， 所以：a=1, b=0, c=0, 且 d=0；
·计算选择器中ID选择器的数量，计为b；
·计算选择器中类选择器、属性选择器和 伪类的数量，计为c；
·计算选择器中类型选择器的数量，计为d；
·忽略伪元素。

将这4个数字 （a, b, c, d）相连（数字进制要以大的为准），得到特殊性。例如：

{ …… } 特殊性 = 0, 0, 0, 0
li { …… } 特 殊性 = 0, 0, 0, 1
ul li { …… } 特殊性 = 0, 0, 0, 2
ul ol+li { …… } 特 殊性 = 0, 0, 0, 3
h1 + [rel="up"] { …… } 特殊性 = 0, 0, 1, 1
ul ol li.warning { …… } 特 殊性 = 0, 0, 1, 3
li.menu.level { …… } 特殊性 = 0, 0, 2, 1
#x34y { …… } 特 殊性 = 0, 1, 0, 0
<p styel=”……”> 特殊性 = 1, 0, 0, 0


特殊性高的规则会取代特殊性低的规则，无论其书写的先后顺序如何，例如：
h1 {color red;} 0,0,0,1
body h1 {color green;} 0,0,0,2 （胜 出）


或者：
h2.grape {color purple;} 0,0,1,1 (胜出)
h2 {color silver;} 0,0,0,1

在特殊性的框架下，继承的特殊性为“0”。也就 是说，任何显式的规则声明都会覆盖掉继承的样式，例如有如下代码：
em { color: blue; }
p.list { color: gray; }
<p class="list"& gt;继承的特殊性为<em>“0”</em>。</p>

虽然“p.list”的特殊性为“0, 0, 1, 1”，但是，对“em”的color声明还是会覆盖掉从“p.list”继承的color样 式
因此，如果需要让p内的em能呈现和p一样的颜色，则需要如下定义：
p.list,
p.list em { color gray; }

转自：http://hi.baidu.com/lansesansan/blog/item/37e0518d5b5689e2f01f3634.html