3.4 CSS三大特性

CSS三大特性——层叠性、继承性和优先性。

3.4.1 CSS层叠性

层叠性就是处理CSS冲突的能力。当同一个元素被两个选择器选中时,CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖掉,权重相同时取后者。

权重可以理解为一个选择器对于这个元素的重要性。id选择器权重为100,类选择器权重为10,标签选择器的权重为1,如图3-6所示。

图3-6 权重

【例3-5】(实例文件:ch03\Chap3.5.html)CSS层叠性。

相关的代码实例请参考Chap3.5.html文件,在IE浏览器中运行的结果如图3-7所示。

图3-7 层叠性

3.4.2 CSS继承性

继承性是子元素继承父元素样式的特性,在CSS中以text-、font-、line-开头的属性以及color属性都可以继承。

有一些比较特殊的元素,如<a>标签的颜色不能继承,必须对<a>标签本身进行设置,<h>标签的字体大小不能继承,必须对<h>标签本身进行设置。

【例3-6】(实例文件:ch03\Chap3.6.html)CSS继承性。

相关的代码实例请参考Chap3.6.html文件,在IE浏览器中运行的结果如图3-8所示。

图3-8 继承性

可以看到,我们只给div设置了样式,3个子元素都继承了父元素的样式,除了<a>标签没有继承颜色,<h>标签没有继承字体大小。

3.4.3 CSS优先性

当不同的规则作用到同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值?CSS有一套优先性的定义,顺序如下:

!important>行内样式>ID选择器>类选择器>标签选择器>通配符>继承>浏览器默认属性值。

【例3-7】(实例文件:ch03\Chap3.7.html)CSS优先性。

相关的代码实例请参考Chap3.7.html文件,在IE浏览器中运行的结果如图3-9所示。

图3-9 优先性