CSS的继承| 青训营笔记

68 阅读2分钟

这是我参与「第五届青训营」笔记创作活动的第3天

一.本节的主要内容

了解了css的继承

二.知识详解

css的继承

在 CSS 中有一个很重要的特性就是子元素会继承父元素对应属性计算后的值。比如页面根元素 html 的文本颜色默认是黑色的,页面中的所有其他元素都将继承这个颜色,当申明了如下样式后,H1 文本将变成橙色。

image.png

body { color: orange; } h1 { color: inherit; } 设想一下,如果 CSS 中不存在继承性,那么我们就需要为不同文本的标签都设置一下 color,这样一来的后果就是 CSS 的文件大小就会无限增大。

CSS 属性很多,但并不是所有的属性默认都是能继承父元素对应属性的,那哪些属性存在默认继承的行为呢?一定是那些不会影响到页面布局的属性,可以分为如下几类:

  • 字体相关:font-familyfont-stylefont-sizefont-weight 等;
  • 文本相关:text-aligntext-indenttext-decorationtext-shadowletter-spacingword-spacingwhite-spaceline-heightcolor 等;
  • 列表相关:list-stylelist-style-imagelist-style-typelist-style-position 等;
  • 其他属性:visibilitycursor 等;

对于其他默认不继承的属性也可以通过以下几个属性值来控制继承行为:

  • inherit:继承父元素对应属性的计算值;
  • initial:应用该属性的默认值,比如 color 的默认值是 #000
  • unset:如果属性是默认可以继承的,则取 inherit 的效果,否则同 initial
  • revert:效果等同于 unset,兼容性差

举例:

<div class="fuji">
<div class="ziji">我是子级</div>
</div>
123

在给fuji设定字体颜色为红色后,子级中的字体也会变为红色。 如果想要子级与父级属性不同,只需要单独对子级设定自己的属性就可以。

注意: 有些情况即使没有给子级设定属性,但是还是属性和父级不同,这是因为有些标签的带有浏览器默认样式表中的样式。因为继承的样式没有任何特殊性,任何给元素的样式都会覆盖继承的样式。

<div class="fuji">
<h1>
这是标题
</h1>
</div>
12345

即使给fuji类样式设定了字号,页面的“这是标题”也不会变成同样的字号。

三.参考文章

juejin.cn/post/694120…