继承

date

Mar 6, 2023

slug

deepcss-inherit

status

Published

继承

如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值。

默认情况下，只有特定的一些属性能被继承，通常是我们希望被继承的那些。它们主要是跟文本相关的属性: color、font、font-family、font-size,font-weight、font-variant、 font-style、line-height、 letter-spacing,text-align、text-indent、 text-transform、white-space 以及 word-spacing。还有一些其他的属性也可以被继承，比如列表属性: list-style、list-style-type、list-style-position 以及 list-style-image。表格的边框属性 border-collapse和border-spacing 也能被继承。

使用 inherit 关键字

例如：修改页脚链接的颜色，继承页脚的文本的样式。

如果页脚发生任何样式改变的话（比如修改第二个规则集，或者被别的样式覆盖），页脚链接的颜色就会跟着页脚其他内容一起改变。比如，当页脚文本变为更深的灰色时，其中的链接也会跟着改变。

//全局的网页链接颜色
a:link{
    color:blur;
}

.footer{
    color: #666; //页脚的文本设置为灰色
}

.footer a{
    color: inherit; //从页脚继承文本颜色
}

使用 initial 关键字

使用initial关键字来撤销作用于某个元素的样式。如果将 initial 值赋给某个属性，那么就会有效地将其重置为默认值，这种操作相当于硬复位了该值。

如果想删除一个元素的边框，设置 border: initial 即可。如果想让一个元素恢复到默认宽度，设置 width: initial 即可。