CSS的继承性

作者: 多叉树；转载须注明出处

CSS的继承性

文本相关的属性一般具有继承性，即给祖先设置的样式，同样被后代标签所继承。

通常具有继承性样式

• color 文本颜色。
• font-weight、font-family、font-size 等以font开头的通常和文本相关的属性。
• text-indent、text-align 等以 text开头的通常和段落相关的属性。
• line-height 等 以line开头的属性。
• list-style 等 以 list开头的属性。

在实践过程中，通常我们会 设置一些通用的全局属性，比如背景色、字号等， 设置在 HTML的body标签上，这样默认的所有body下的子标签都具有了此样式。

在继承的情况下，选择器权重失效（了解选择器权重 (opens new window)）从而遵循 就近原则， 标签会选择距离自己最近的样式。

<!--以下根据就近原则， 文字展示绿色-->
<style>

    #box1 #box2 #box3 {
        color: red;
    }

    p {
        color: green;
    }
</style>

<div id="box1" class="box1">
    <div id="box2" class="box2">
        <div id="box3" class="box3">
            <p>测试文字样式</p>
        </div>
    </div>
</div>

<!--以下根据就近原则，显示蓝色-->
<style>

    #box1 #box2 {
        color: red;
    }

    .box2 .box3 {
        color: blue;
    }
</style>
<div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <p>测试文字样式</p>
            </div>
        </div>
</div>