随笔 - 54, 文章 - 0, 评论 - 0, 阅读 - 13105

CSS的层叠性和继承性

CSS是层叠式样式表的简称，层叠性和继承性是其基本特征。

1.层叠性

所谓层叠性是指多种CSS样式的叠加。

下面通过一个案例对CSS的层叠性进行演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS层叠性</title>
        <style type="text/css">
        p{
            font-size: 12px;
            font-family: "微软雅黑";
        }
        .special{font-size: 16px;}
        #one{color: red;}
        </style>
    </head>
    <body>
        <p class="special" id="one">段落文本1</p>
        <p>段落文本2</p>
        <p>段落文本3</p>
    </body>
</html>

运行效果如图所示：

2.继承性。

所谓继承性是指书写CSS样式列表时，子标记会继承父标记的某些样式，如文本的颜色和字号。

继承性非常有用，它使网页设计者不必在元素的每个后代上添加相同的样式。如果设置的属性是一个可继承的属性，只需将它应用于父元素即可。如下面的代码：

p,div,h1,h2,h3,h4,ul,ol,dl,li{color：black；}

就可以写成：

body{color：black；}

恰当地使用继承可以简化代码，降低CSS样式的复杂性。但是，如果在网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难，所以对字体、文本属性等网页中通用的样式才建议使用继承。

并不是所有的CSS属性都可以继承，如下面这些属性就不具有继承性：

边框属性
外边距属性
内边距属性
背景属性
定位属性
布局属性
元素宽高属性

当为body元素设置字号属性时，标题文本不会采用这个样式。标题文本之所以不采用body元素设置的字号，是因为标题标记<h1>~<h6>有默认字号样式，这时默认字号覆盖了继承的字号。

CSS的优先级

定义CSS样式时，经常出现2个或更多规则应用在同一元素上，这时就会出现优先级的问题。

为了体会CSS优先级，首先来看一个具体的例子：

p{ color: red; }        /*标记选择器*/
.blue{ color：green；}  /*类选择器*/
#header{ color：blue；} /*id选择器*/

其对应的HTML结构为：

<p id="header" class=“blue”；>
     帮帮我，我到底显示什么颜色？
</p>

当不同的选择器对同一个元素设置文本颜色，这时浏览器会根据选择器的优先级规则解析CSS样式。其实CSS为每一种基础选择器都分配了一个权重，其中，标记选择器具有权重1，类选择器具有权重10，id选择器具有权重100。这样id选择器#header就具有最大的优先级。

对于由多个基础选择器构成的复合选择器（并集选择器除外），其权重为这些基础选择器权重的叠加。例如下面的代码：

p strong{color: black;}               /*权重为：1+1*/
strong.blue{color: green;}            /*权重为：1+10*/
.father strong{color: yellow;}        /*权重为：10+1*/
p.father strong{color: orange;}       /*权重为：1+10+1*/
p.father.blue{color: gold;}           /*权重为：1+10+10*/
#header strong{color: pink;}          /*权重为：100+1*/
#header strong.blue{color: red;}      /*权重为：100+1+10*/

对应的HTML结构为：

<p class=“father” id=“header”>
     <strong class=“blue”>文本的颜色</strong>
</p>

此外，在考虑权重时，还需要注意下面一些特殊情况：

在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，它的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100.总之，他拥有比上面提到的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。例如：
```
/*CSS文档，文件名为style.css*/
#header{color：red；}
```
HTML文档结构为：
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>就近原则</title>
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <style type="text/css">
        #header{color: gray;}  /*内嵌式样式*/
        </style>
    </head>
    <body>
        <p id="header">权重相同时，就近优先</p>
    </body>
</html>
```
上面的页面被解析后，段落文本将显示为灰色，及内嵌式样式优先，这是因为内嵌式样式比链入的外部样式更靠近HTML元素。同样的道理，如果同时引入2个外部样式列表，则排在下面的样式表具有较大的优先级。如果此时将内嵌式样式更改为：
```
p{color：gray}  /*内嵌式样式*/
```
则样式的权重变得不同，#header的权重更高，文字将显示为外部样式定义的红色。

CSS定义了一个！important命令，该命令被赋予最大的优先级。也就是说不管权重如何及样式位置的远近，！important都具有最大优先级。例如：

/*CSS文档，文件名为style.css*/
#header{color：red！important；}  /*外部样式*/

HTML文档结构为：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>！important命令最优先</title>
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <style type="text/css">
        #header{color: gray;}  
        </style>
    </head>
    <body>
        <p id="header" style="color: yellow;">  <!--行内式CSS样式-->
            天王盖地虎，！important命令最优先
        </p>
    </body>
</html>

该页面被解析后，段落文本显示为红色，即使用！important命令的样式拥有最大的优先级。注意，！important命令必须位于属性值和分号之间，否则无效。

另外需要注意的是，复合选择器的权重为组成它的基础选择器权重的叠加，但是叠加后的权重并不是简单地靠数字之和比较。下面通过一个案例来具体说明：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>复合选择器权重的叠加</title>
        <style type="text/css">
        .inner{text-decoration: line-through;}  /*类选择器定义删除线，权重为10*/
        div div div div div div div div div div div{text-decoration: underline;}
        /*后代选择器定义下划线，权重为11个1的叠加*/
        </style>
    </head>
    <body>
        <div>
            <div><div><div><div><div><div><div><div><div><div>
                 <div class="inner">文本的样式</div>
            </div></div></div></div></div></div></div></div></div>
        </div>
    </body>
</html>