![HTML5+CSS3+JavaScript 从入门到项目实践(超值版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/418/31794418/b_31794418.jpg)
3.4 CSS三大特性
CSS三大特性——层叠性、继承性和优先性。
3.4.1 CSS层叠性
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P52_13609.jpg?sign=1739036868-l1CPnVEz2C4pmhXqNxLQhTvAf0qbwQjh-0-9456da0d813a28a90b2cb4b7ed9e84d7)
层叠性就是处理CSS冲突的能力。当同一个元素被两个选择器选中时,CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖掉,权重相同时取后者。
权重可以理解为一个选择器对于这个元素的重要性。id选择器权重为100,类选择器权重为10,标签选择器的权重为1,如图3-6所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P52_13484.jpg?sign=1739036868-CQyZ8sj7lOpWJF6fAKh0V4VyeM6Y7vt3-0-eeb51e09aa3b729491092eebf152c60b)
图3-6 权重
【例3-5】(实例文件:ch03\Chap3.5.html)CSS层叠性。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P52_119728.jpg?sign=1739036868-GrRkAlP5eLIeS41OQZMZysTLe0X965Xd-0-3f39222bd4907d907312622661838dc9)
相关的代码实例请参考Chap3.5.html文件,在IE浏览器中运行的结果如图3-7所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P53_13613.jpg?sign=1739036868-B6nXYRRzozVuwA1o6nmWlCp5B1fbHd3D-0-38e6a5447d0bfe2f76cefb2bb1bf0ee4)
图3-7 层叠性
3.4.2 CSS继承性
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P53_13759.jpg?sign=1739036868-d5AY7WAcZyTTEdn4ntL5IUnTfASSxEwQ-0-d2a92f0506d7372481c11c917c77a19b)
继承性是子元素继承父元素样式的特性,在CSS中以text-、font-、line-开头的属性以及color属性都可以继承。
有一些比较特殊的元素,如<a>标签的颜色不能继承,必须对<a>标签本身进行设置,<h>标签的字体大小不能继承,必须对<h>标签本身进行设置。
【例3-6】(实例文件:ch03\Chap3.6.html)CSS继承性。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P53_119729.jpg?sign=1739036868-i40qj39AWAuWvRRSMc1jdHNoHL5ON58J-0-ca75f4b51031f3c9455869ecba497ca4)
相关的代码实例请参考Chap3.6.html文件,在IE浏览器中运行的结果如图3-8所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P53_13751.jpg?sign=1739036868-IfkHj0FggMibF7GjyBei2ALA8iPnkJTJ-0-b22f3b8196d537a54a92a560270697e9)
图3-8 继承性
可以看到,我们只给div设置了样式,3个子元素都继承了父元素的样式,除了<a>标签没有继承颜色,<h>标签没有继承字体大小。
3.4.3 CSS优先性
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P54_13927.jpg?sign=1739036868-P8NTWUW7cPU6swxkFspkvjGDwOy2ZlpO-0-eb8d35e33c65cdc74f9c216740ef1a8a)
当不同的规则作用到同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值?CSS有一套优先性的定义,顺序如下:
!important>行内样式>ID选择器>类选择器>标签选择器>通配符>继承>浏览器默认属性值。
【例3-7】(实例文件:ch03\Chap3.7.html)CSS优先性。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P54_119730.jpg?sign=1739036868-gH0ujiCVdcXaxCe3O3PIsISF3zO72Tx1-0-aa32cab37a8974c6906529d282546201)
相关的代码实例请参考Chap3.7.html文件,在IE浏览器中运行的结果如图3-9所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P54_13919.jpg?sign=1739036868-NK1i7HbsbfqWlGVXJPhr3KjHbFJfj0By-0-7f6e1e91b3bf582fe9d68f8c1c806135)
图3-9 优先性