02.css入门笔记-css的三大特性

文章目录

前言

一、层叠性

二、继承性

三、优先级

总结

---

前言

css有三大特性、分为是层叠性、继承性、优先级。下面我们来分别介绍！

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、层叠性

1.给相同选择器设置相同样式，则会遵循就近原则，显示设置的样式

2.代码示例（如下）：

<style>

        .p1 {

                color: red;

                font-size: 12px;

        }

        .p2 {

                color: pink;

        }

</style>

<p class="p1 p2">写代码是一件很快乐的事情</p>

注意：以上p标签，给相同的选择器（类选择器）设置了属性，都含有color属性，遵循就近原则，字体显示为 pink

二、继承性

1.继承性：子标签可以继承父标签的某些样式（比如文字类的样式：text-\color\font-\line-这些开头的）

2.优点：降低css复杂性、简化代码

3.继承性特殊情况：行高的继承

.pink {

        color: pink;

        /* font: 14px/24px "Microsoft YaHei" */

        font: 14px/1.5 "microsoft Yahei"

}

.pink div {

        /* 当前的行高是：1.5*16 24px */

        font-size: 16px;

}

    <div class="pink">

        <div>粉红色的回忆</div>

        <p>粉红色的回忆</p>

    </div>

三、优先级

优先级：!important(无穷大)>行内样式>id选择器>类或伪类选择器>标签选择器>继承或通配符选择器

注意：继承的权重是0，不管父元素权重有多高，子元素的到的权重 都是0！

复合选择器有权重叠加的情况，但是权重虽然会叠加但是不会有进位的问题！

---

总结

以上是关于css的三大特性的基本介绍，我认为最容易掉进坑里的就是css层叠性。当我们在书写了大量css代码的时候，一定要注意在给相同选择器设置样式的时候，会导致前面的样式被覆盖。也就是就近原则！