揭秘CSS(第 1 版)
1.5.5 样式继承与层叠
阅读(

概述

CSS简介

CSS开发环境

CSS语法

CSS属性的值

创建样式表

样式表的优先级

创建内联样式表

创建内嵌样式表

创建外部样式表

样式继承与层叠

所谓继承,就是有些CSS属性不仅影响当前元素,还会影响这些元素的后代。假如给 body设置的样式为:

body {
    color: red;
}

由于color属性具有继承性,那么 body 内部的元素,如果没有对 color 设置其它规则,都将显示为红色。

继承可以简化样式表,并使之更加高效。假如想让网页上的所有文本都使用同一种字体,就不必给为每个元素创建样式,而只需给 body 元素创建一个样式即可。如:

body {
   font-family: Arial;
}

在 body 元素中定义字体之后,网页上的所有元素都将继承这种字体。这种方法很高效,也很轻松,这就是继承的魅力所在。

当然,继承也可以应用于网页的某一部分。如,用 div 定义了一个区域,通过给该 div 应用样式,可以只给该区域内是所有元素使用特殊的样式。如:

div {
    color: green;
}

在 div 元素中定义文本颜色之后,包含在该 div 内部的任何元素,如p、h1、div等,都将继承相同的文本颜色。

并非所有的CSS属性都能被继承,有许多CSS属性根本不会传递给其后代,如 border 属性。给 body 增加边框,则不会影响到它的后代。当然,这也是有道理的。如果 border 属性也能被继承,则给 body 增加边框后,页面的所有元素都将会有一个边框,这显然不合适。因此,影响元素位置的那些属性,如 margin、padding、border等,都不具有继承性。

但是,无论一个属性是否具有继承性,如果将它的值显式地设置为 inherit,它就具有继承性。假设在一个 article 元素中包含几个段落,并为 article 元素设置了一个边框。如果定义以下规则:

p {
    border: inherit;
}

这条规则就可以强制段落元素继承父元素的 border 属性,从而使 article 元素中的所有段落,都获得与父元素相同的边框样式。

所谓层叠,就是样式的冲突规则,是指一个元素的同一个属性,被多个CSS规则同时定义时,如何应用这些样式规则。

CSS的层叠规则是:如果这些规则不冲突,则它们会同时生效;如果某些规则相互冲突,则高优先级的规则会生效;如果相同优先级的规则发生冲突,则最后定义的样式规则会生效。如,对 p 元素定义了两个样式规则:

p {
    font-size: 14px;
    font-family: Arial;
}
p {
    font-size: 16px;
    color: black;
}

font-family 和 color 属性,两个选择器的规则没有冲突,这两个规则会同时生效。而这两个选择器同时定义了 font-size 属性,故 font-size 属性发生冲突,由于这两个选择器的优先级相同,则后定义的样式会覆盖先定义的样式,故后定义的 font-size: 16px 会生效。经过层叠后,p 元素的最终样式就变成了:

p {
    font-size: 16px;
    font-family: Arial;
    color: black;
}

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验