用户登录

CSS 样式还有一个继承的特性,也就是元素可以继承来自父辈的样式,不过要注意有些样式属性可以被继承,有些是不能被继承的。

在样式表里,用 #app 选择器写一段样式,设置一下 font-size 把字号设置成 18 像素。在浏览器检查一下这个 #app 元素里的段落元素,你会发现元素继承了来自 #app 的这段样式里的 font-size。这个 font-size 就是可以被继承的样式属性。

在这段样式里,再用 border 给元素添加一个边框,1个像素的黑色实线,页面上只有 #app 这个元素应用了这个边框样式,它的子元素并没有继承这个边框样式,因为 border 这个样式属性不能被继承 。

inherit

CSS 提供了几个通用的属性值可以控制样式的继承。在 #app 里面添加一行样式,把文字的 color 设置成 blue。现在标题还有段落文字的颜色都变成了蓝色,这个样式是从父辈那里继承过来的。现在这个链接的颜色并不是蓝色而是黑色,是因为之前我们单独设置过它的文本颜色的样式,找到这行样式,可以把它删除掉。

下面我们再用 a 作为选择器写一段样式,这里把 color 设置成 inherit,意思就是使用从父辈那里继承过来的值。现在链接文字的颜色就变成了蓝色,因为它的父辈的文本颜色是蓝色。

initial

再试一下 initial 这个值,把 a 的 color 改成 initial,意思是使用属性的初始值,color 这个属性的初始值是黑色,所以链接文字的颜色现在变成了黑色。注意这个 initial 并不表示浏览器的默认样式表里的值,它指的是 CSS 样式属性的初始值。

CSS 样式应用规则(继承)《 Web 基础:样式规则 》

统计

14621
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点