CSS属性继承

CSS 继承

MDN 的教程：https://developer.mozilla.org/zh-CN/docs/Web/CSS/inheritance

什么是继承呢？

一个子元素可以从祖先元素继承“可继承属性”的计算值。

可以对比Java的继承来理解，子类的实例调用某方法show()时，如果子类中不存在，则会调用父类中的show()方法，如果父类中也没有，则调用父类的父类中的show()方法，这样依次查找，直到顶端。

举个栗子：

<div class="par1">
   1
   <div class="par2">
       2
       <div class="par3">3</div>
   </div>
</div>

// css
.par1 {
   font-size: 20px;
}
.par2 {
   color: red;
}

实测发现，2，3的字体颜色都为红色了而且字体大小都是20px，但是par3本身并没有声明这些属性值。

形成这个现象的的原理，就是“CSS属性的继承”的特性。color值继承自par2, font-size的值继承自par1

并不是所有的CSS属性都是可以继承的，或者说是自动继承

<div class="par1">
   1
   <div class="par2" id="par2">
       2
   </div>
</div>

<style>
.par1 {
   display: inline-block;
   font-size: 20px;
}
.par2 {
   color: red;
}
</style>

<script>
const par2 = document.getElementById('par2');
const style2 = window.getComputedStyle(par2);
console.log(style2.display); // block
</script>

window.getComputedStye() ,这个方法可以获取某个元素“计算后的CSS属性”。

为什么par2的display是block， 而不是inline-block呢？

par2的display的属性值为“block”，但是其父元素par1是"inline-block"。 形成这种现象的原理是“display为非自动继承的属性值”。

如何让par2的display的值，随par1的值自动变化(也可以是继承自par1)呢?

代码如下:

.par2 {
    display: inherit;
}

此时， console.log(style2.display); 的输出值就是"inline-block"了。

CSS能自动继承的属性

border-collapse
border-spacing
color
cursor
direction
empty-cells
font(-style | - variant | -weight | -size | -family | -stretch | -size | -adjust)
letter-spacing
line-height
list-style(-image | -position | -type)
overflow-wrap
pointer-events
quotes
text-indent 缩进
text-size-adjust
text-underline-position
text-shadow
text-align
text-align-last
text-justify
test-transform
tab-size
table-layout
white-space
word-break
word-wrap
word-spacing
writing-mode
visibility
zoom