Web前端开发笔记19——css三大特性_css cadetblue-优快云博客

本文链接：https://blog.youkuaiyun.com/HAC_SOUL/article/details/115861821

本文介绍了CSS中的层叠性、继承性和优先级的概念。详细解释了如何解决多个选择器冲突的问题，包括复合选择器的权重叠加，并给出了具体的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.层叠性，一般在定义了多个相同选择器的不同样式时，会优先选择最近的样式来采用。

2.继承性，父类选择器的样式会运用在子类上。一般只作用于文字格式方面的css属性上。

注：行高继承，在之前我们学过font:font-style font-weight font-size/line-height font-family，这个语法，我们当时写line-height的时候都是以px结尾的，如果我们使用1.5，会是什么样的状态呢？

<style>
        div{
            font: 12px/1.5 "Microsoft YaHei UI";
        }
        p{
            font-size: 20px;
        }
    </style>

所以，这里的1.5是指在div中的其他元素的行高都是字体大小的1.5倍。

3.优先级：当一个元素指定多个选择器，就会有优先级产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

我们先设置如下的css样式

div {
            color: #e8e69d;
        }

        .div1 {
            color: chartreuse;
        }

        #div2 {
            color: red;
        }
——————————————————————————
<div class="div1" id="div2" style="color: cadetblue">
    这是一个1.5倍行高的文字。
</div>

我们分别测试其优先级。可以得到颜色为cadetblue的字体。

如果我将div的css中添加color属性为important。

div {
            color: #e8e69d!important;
        }

则最高优先级，选择了color为#e8e69d的字体。

注意点：

4.复合选择器会有权重叠加的问题。如下：