2.7 CSS特性
CSS样式具有两个特性：继承性和层叠性，下面分别进行说明。
2.7.1 CSS继承性
CSS继承性是指后代元素可以继承祖先元素的样式。继承样式主要包括字体、文本等基本属性，如字体、字号、颜色、行距等，对于边框、边界、补白、背景、定位、布局、尺寸等类型属性是不允许继承的。
提示：灵活应用CSS继承性，可以优化CSS代码，但是继承的样式的优先级是最低的。
【示例】下面的示例在body元素中定义整个页面的字体大小、字体颜色等基本页面属性，这样包含在body元素内的其他元素都将继承该基本属性，以实现页面显示效果的统一。
新建网页，保存为test.html，在<body>标签内输入如下代码，设计一个多级嵌套结构。
在<head>标签内添加<style type="text/css">标签，定义内部样式表，然后为body元素定义字体大小为12像素，通过继承性，则包含在body元素的所有其他元素都将继承该属性，并显示包含的字体大小为12像素。在浏览器中预览，显示效果如图2.25所示。
body {font-size:12px;}
图2.25 CSS继承性演示效果
2.7.2 CSS层叠性
CSS层叠性是指CSS能够对同一个对象应用多个样式的能力。
【示例1】新建网页，保存为test.html，在<body>标签内输入如下代码。
<div id="wrap">看看我的样式效果</div>
在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，分别添加以下两个样式。
div {font-size:12px;}
div {font-size:14px;}
两个样式中都声明了相同的属性，并应用于同一个元素上。在浏览器中测试，则会发现最后字体显示为14像素，也就是说14像素字体大小覆盖了12像素字体大小，这就是样式层叠。
当多个样式作用于同一个对象，则根据选择器的优先级，确定对象最终应用的样式。
标签选择器：权重值为1。- 伪元素或伪对象选择器：权重值为1。
- 类选择器：权重值为10。
- 属性选择器：权重值为10。
- ID选择器：权重值为100。
- 其他选择器：权重值为0，如通配选择器等。
然后，以上面权值数为起点来计算每个样式中选择器的总权值数。计算规则如下。
- 统计选择器中ID选择器的个数，然后乘以100。
- 统计选择器中类选择器的个数，然后乘以10。
- 统计选择器中标签选择器的个数，然后乘以1。
以此类推，最后把所有权重值数相加，即可得到当前选择器的总权重值，最后根据权重值来决定哪个样式的优先级大。
【示例2】新建网页，保存为test.html，在<body>标签内输入如下代码。
<div id="box" class="red">CSS 选择器的优先级 </div>
在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，添加如下样式。
body div#box { border:solid 2px red;}
#box {border:dashed 2px blue;}
div.red {border:double 3px red;}
对于上面的样式表，可以这样计算它们的权重值：
body div#box的权重值= 1 + 1 + 100 = 102。
#box的权重值= 100。
di.red的权重值= 1 + 10 = 11。
因此，最后选择器的优先级为body div#box大于#box，#box大于di.red。所以最终看到的显示效果为2像素宽的红色实线，在浏览器中预览，显示效果如图2.26所示。
图2.26 CSS优先级的样式演示效果
提示：与样式表中样式相比，行内样式优先级最高。相同权重值时，样式最近的优先级最高。使用!important命令定义的样式优先级绝对高。!important命令必须位于属性值和分号之间，如#header{color:Red!important;}，否则无效。