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