CSS的三大特性

CSS的三大特性：层叠性、继承性、优先级。

层叠性：在相同选择器的设置相同样式的时候，后面设置的样式会覆盖前面的样式，如下图：

CSS代码：

.demo {
      width: 600px;
      height: 400px;
      margin: 100px auto;
      background-color: #be2121;
      border: 10px solid #33ec3f;
    }
.demo {
      border-bottom-color: #7433ec;
    }

 这里层叠了下边框的颜色

继承性：子元素继承父元素属性，如下图：

CSS代码片段：

.demo {
      width: 600px;
      height: 400px;
      margin: 100px auto;
      background-color: #be2121;
      border: 10px solid #33ec3f;
      color:aliceblue;
    }

HTML代码：

<div class="demo">
    <div>我是div</div>
    <p>我是P标签</p>
  </div>

子元素div和p标签是没有设置样式的，但是从图片中可以看出，它们都继承了父元素设置的color

优先级：当同一个元素指定多个选择器时，如果选择器相同，执行层叠性；如果选择器不同，执行权重较高者。

各种选择器的权重值如下表：

选择器	选择器权重
继承 或 *	(0,0,0,0)
元素选择器	(0,0,0,1)
类选择器，伪类选择器	(0,0,1,0)
ID选择器	(0,1,0,0)
行内样式 style=""	(1,0,0,0)
!important 重要的	∞无穷大

注意：不管父元素的权重多高，子元素得到的权重都是0

权重叠加的例子：

div → 0,0,0,1

div p → 0,0,0,2

nav div a → 0,0,0,3

.demo p → 0,0,1,1

a:hover → 0,0,1,1

#demo p → 0,1,0,1