重拾web-css：层叠和特殊性

即使在不太浮复杂的样式中，要寻找同一个元素可能有两个或者多个规则。CSS通过一个称为层叠的过程处理这种冲突，层叠给每个规则分配一个重要度。

用style属性编写的规则总比其它任何规则特殊，具有ID选择器的规则比没有ID选择器的规则特殊，具有类选择器的规则总比只要类选择器的规则特殊。例如，假设有如下这组规则。你认为标题会是什么颜色:灰色

#content div#main-content h2 {
    color :gray
}

#content div#main-content>h2 {
    color :gray
}

"content">
    "main-content">
        Strong Times

        xxxxxxxxxx

    

    "news-story">
        Strong Times

        xxxxxxxxxx

    

再编写CSS是特殊性非常有用，因为它可以对一般元素应用一般样式，然后再更特殊的元素上覆盖它们，例如，如果你希望站点上大多数文本是黑色的，但介绍文本是灰色的，则可以采用如下的样式

p {color: black}
p.intro {color: gray}

再主体标签上添加类或者ID

一种有意思的特殊性用法是在主体(body)标签上应用类或者ID，这样做以后，就可以根据页面或者站点范围内覆盖样式。例如，如果希望新的页面具有特殊的布局，那么可以在主页主体上添加一个类名，并且使用它覆盖样式:

body.news {}

"news">
    XXXXXXXXXX

有时候，再特殊页面上需要覆盖这些样式，比如在新闻存档页面上。再这种情况下，可以在主体标签上添加ID来标识这个页面

body.news {}

body#archive {}

"archive" class="news">
    XXXXXXXXXX