❮上一节标签样式默认性下一节选择器优先级（覆盖性）❯

5.6 CSS继承性

一个元素的一个属性除初始值、浏览器为标签设置默认值，还可能会继承父元素（祖先元素）的可继承属性。属性基本特征的“是否是继承属性”对应CSS层叠性的第3个子特性：继承性。如果一个属性是可继承属性，则子元素会继承父元素的属性，依此类推，它的所有后代元素会继承该属性值。层叠性处理过程包含7个值，子元素继承父元素的计算值computed value，而不是指定值specified value。

ConceptError003错误理解：一个元素的属性与父元素无关。

ConceptError004错误理解：一个元素的属性继承父元素的声明值。

（1）基础示例。MDN查询font-size属于可继承属性，再查询border属性是不可继承的。

示例代码

<body>
    <div id="div1" style="font-size:24px;border: 1px solid #4aa6fc;padding: 5px;">
        <div id="div1_1" style="color: #0aaa76;">
            <span>小步教程</span>
        </div>
        <div id="div1_2">
            xiaobuteach.com
        </div>
    </div>

    <div id="div2">CSS属性的可继承性</div>
</body>

子元素会继承祖先元素的可继承属性，所以div1_1的font-size是24px，无border。假设border可以继承，则上述两个div分别有自己的边框，共有两个边框，实际当然没有。

运行效果

（2）开发者工具查看CSS属性继承。开发者工具通过属性颜色表明祖先元素的属性是否可继承。“继承自”的CSS属性，如果是可继承则标记红色，如果不可继承属则标记灰色。

（3）关键字initial与inherit

现在有一个特殊需求场景：子元素不继承父元素的font-size属性，子元素继承父元素的border属性，如何编码实现？CSS规范已经定义属性是否可以继承，可以通过编码调整。

关键字initial是一个特殊值，表示属性的初始默认值；关键字inherit是一个特殊值，表示父元素的属性值。

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小步教程</title>
</head>

<body>
    <div id="div1" style="font-size:24px;border: 1px solid #4aa6fc;padding: 5px;">
        <div id="div1_1" style="font-size: initial;color: #0aaa76;border: inherit;padding: inherit;">
            <span style="color: initial; border: inherit;padding: inherit;">小步教程</span>
        </div>
        <div id="div1_2" style="font-size: initial;border: inherit;padding: inherit;">
            xiaobuteach.com
        </div>
    </div>

    <div id="div2">设置CSS属性的可继承性</div>
</body>

</html>

运行效果

上述代码两个关键字用于内联样式，也可用于选择器。

div{ border: inherit;}

表示所有div元素的border属性可继承。

*{border: inherit; }

表示所有元素的border可继承，彻底改变此属性的可继承性，但这个设置不符合实际日常需求，CSS规范设置属性的可继承性时，通常符合实际日常需求。

initial与inherit在实际项目使用场景极少，不推荐使用。如果编写通用组件可能偶尔使用。

❮上一节标签样式默认性下一节选择器优先级（覆盖性）❯

第05章 CSS语法级特性

5.6 CSS继承性

CSS入门项目小步教程