继承层叠优先级

最新推荐文章于 2024-10-12 14:14:19 发布

langmanboy

最新推荐文章于 2024-10-12 14:14:19 发布

阅读量184

点赞数

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/langmanboy/article/details/124030256

版权

本文详细介绍了CSS中的继承性、层叠性和优先级。继承性允许某些属性从父元素继承，如文字样式；层叠性解决样式冲突，后面的规则优先；优先级根据选择器权重决定，ID选择器权重最高，!important规则具有最高优先级。

摘要由CSDN通过智能技术生成

继承层叠优先级

在使用CSS选择器的时候要注意CSS的三大属性：继承性和层叠性和优先级属性。

继承性。有一些属性给祖先元素，所有的后代元素都集成上了。关于文字样式的（color、font-、text-、line-），都能够继承；所有关于盒子的、定位的、布局的属性都不能继承
层叠性。层叠性是一种能力，就是处理冲突的能力。当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则
优先级。浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则

1. 继承性

继承也需要在上下文中去理解 —— 一些设置在父元素上的css属性是可以被子元素继承的，有些则不能（所有关于盒子的、定位的、布局的属性都不能继承）

<div class="box">
    <h1>继承性</h1>
    <p>继承性</p>
    <span>继承性</span>
    <span>继承性</span>
    <ul>
        <li>继承性</li>
        <li>继承性</li>
        <li>继承性</li>
    </ul>
</div>

/* 定位 布局 盒子属性都不会被继承 */
.box {
   
    position: absolute;
    display: block;
    border: 2px solid #db5b34;