这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战

前言

前面更新的关于春节活动的文章，发现基础的css还存在问题，接下来说说css的三大特性，大家还记得吗，我问了几个一起学习前端的同学，哈哈哈，大都学了后面，忘了基础。面试时会问的哦。

css三大特性

层叠

层叠：可以给相同的内容设置不同的css属性。
例如在下图中

在这里给一个div设置了不同的css属性，宽width，高height，背景颜色background-color，圆角边框border-radius，盒子阴影 box-shadow等属性
但要注意的是给盒子设置相同的属性的时候，通常会出现样式冲突，在想同的权重下会按CSS书写的顺序，以最后的样式为准。

继承

继承：给父元素的设置部分css样式，子元素也管用。也可以理解为就是“子承父业” 例如以下的标签，p标签的父元素为div标签。在div中设置一些字体属性，p标签也管用，例如行高：line-height ；字体大小：font-size;文本居中：text-align: center;

  <div>
        <p>不吃鱼d猫</p>
  </div>

我们在控制台中可以清晰的看到：p标签继承了div标签的属性。

权重

权重：给同一个内容设置相同的css属性，属性值不同，谁权重高就设置谁。
上面所说的继承来的属性的权重最低，很容易被改变，我们一般说是0，
来看结构：设置p的属性在div的上面，所以我们不考虑css顺序问题，但是字体的颜色依旧是白色，不是继承来的黑色。

p {
            color: white;
        }
        div {
            color: black;
        }

而id选择器的权重又会大于元素选择器
来看以下结构，抛开css执行顺序，字体的颜色还是白色，

  #box {
            color: white;
        }
p {
            color: blue;
        }

但是行内样式又会大于ID选择器的权重
来看结构，字体的颜色会是黑色，在控制台中，样式的改变清晰明了。

  #box {
            color: white;
        }
        
 <p id="box" style="color: black;">不吃鱼d猫</p>

但是，还有更大的，那就是!important，css中该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

   p {
            color: black !important;
        }

综上所述：
!important>行内样式> ID 选择器>类(伪元素、伪类、属性)选择器>元素选择器>通用选择器（通配符）

别小看css基础内容哦，是该复习一下的。

前言

css三大特性

层叠

继承

权重