115.css的initial、inherit、unset
css中有几个关键字能够用于任何 html 元素
- initial
- unset
- inherit
一、概述
这应该使我们最常遇见的属性了。比如我们常给父级设置 color,结果发现子级的颜色也变得和父级一样。
很多东西,我们使用它的时候,甚至没有反应过来在使用它。
每一个css都有一个特性 —————— 默认继承 或者 默认不继承。
以下就是一些举例
- 可继承属性
- 所有元素可继承 visibility、cursor
- 内联元素可继承 letter-spacing/word-spacing/white-space/color/font/font-family/font-style/font-weight/text-decoration.......
- 块状元素可继承 text-indent/text-align
- 列表元素可继承 list-style/list-style-type/list-style-position/list-style-image
- 表格元素可继承 border-collapse
- 不可继承属性
- 不是可继承属性,,,就是不可继承的。。。(哈哈,具体到 mdn 可查)
一、inherit - 继承
这个其实很简单,对于可继承属性的,甚至不需要我们去特意设置。因为默认如此。
举个例子:
div {
color: #089e8a;
}
设置后的模样:
我们什么都没有设置,或者我们特地设置其子级,结果是一样的。
div {
color: #089e8a;
}
span {
color: inherit;
}
设置后的模样:
二、initial - 默认的
initial关键字用于设置 css 属性为它的默认值。
还是按照上面的那个例子,我们设置其子级为默认的。
div {
color: #089e8a;
}
span {
color: initial;
}
设置后的模样:
这个时候其实我们发现,它的颜色变成了 黑色的,因为文字的颜色默认就是黑色的。
有一个也许能够派的上用场的用法:将全部花里胡哨的样式变回初始的模样,代码如下:
all: initial
三、unset - 不设置
- 如果是可继承属性,就表现为父级的样子,等同于 inherit
- 如果是非可继承属性,就表现为非父级的样子,等同于 initial
div {
color: #089e8a;
}
span {
color: unset;
}
设置后的模样:
complete.
一遍一遍的咀嚼,总会烂的。