CSS 的继承性、层叠性与权重问题解析

news2024/9/23 0:54:45

非 VIP 用户可前往公众号进行免费阅读

继承性

层叠性

CSS的权重问题

如果权重一样，以后出现的为准

以权重大的为准

没有选中，权重为0，就近原则

权重只和css顺序有关

非 VIP 用户可前往公众号进行免费阅读

CSS 的继承性、层叠性与权重问题解析本文主要介绍了 CSS 的继承性和层叠性，以及权重问题。包括继承性和层叠性的概念，权重一样时以后出现的为准，权重大的优先，没选中权重为 0 遵循就近原则，还指出权重只和 CSS 顺序有关，为深入理解和运用 CSS 提供了重要参考。https://mp.weixin.qq.com/s?__biz=MzIxNTcyNjE0NA==&mid=2247484612&idx=1&sn=c614f821ccefbb7f8aeaf070cab72f84&chksm=9792a5eba0e52cfdc3efb99f7b1b2c8a6dfcea0125cdda0b74e5c939507d211d5e8eb038a139&scene=21#wechat_redirect

继承性

CSS的继承性意味着当为某个元素设置特定属性时，其后代元素可能会继承这些属性。例如，颜色（color）、以“text-”开头的属性、以“line-”开头的属性以及以“font-”开头的属性等关于文字样式的属性通常都具有继承性。而所有关于盒子模型、定位和布局的属性一般不能被继承。

示例代码如下：

css:

<style type="text/css">  
    div{   
        color:green;  
        text-align: center;  
        line-height: 35px;  
        font-size: 14px;  
    }  
</style>

html:

<body>  
    <div>  
        <h1>标题</h1>  
        <p>段落</p>  
        <ul>  
            <li>li</li>  
            <li>li</li>  
        </ul>  
    </div>  
</body>

运行结果：