Skip to content

继承

CSS样式规则的继承:如果我们的某个元素没有定义样式规则,当该元素的父级元素定义了,那么这个元素的样式就会继承父级元素定义的样式

html
<body>
    <article>
        <div>jlc</div>
    </article>
</body>

<style>
    article {
        color: red;
    }
</style>

<div>jlc</div>标签没有设置样式,所以会继承父级的样式,因此字体颜色是红色的

注意:继承没有权重,如果子元素定义了任何的样式规则,都会在子元素上进行生效,断开父元素的继承

一般情况下,我们需要将网页当中大部分元素会应用到的场景,会在父元素中设置统一的样式(如字体大小,颜色等等),但是,有一些的属性是不会被继承的,如:边框,如果子元素需要边框,必须在子元素下进行设置边框样式


通配符与继承

通配符的权重是0000,继承的权重是无,0权重和无权重不是相等的,0权重大于无权重

html
<body>
    <article>
        <h2>
            jlc
            <span>111</span>
        </h2>
    </article>
</body>

<style>
    * {
        color: green;
    }
    
    h2 {
        color: red;
    }
</style>

上述例子中:jlc是显示红色的,111是显示绿色的

因为<span>111</span>标签没有设置自己的样式,所以会去继承h2标签的样式,但是又存在通配符*的所有标签的样式,其权重为0,大于继承的权重无,所有其内容会显示绿色

Released under the MIT License.