05.属性的继承

CSS属性继承

span元素和h2元素不用设置color也显示蓝色

  <div class="box">
    111111
    <div>
      <span>22222</span>
      <h2>33333</h2>
    </div>
  </div>

    .box {
     color: #00f;
   }

• 一个属性具备继承性, 那么在该 元素上设置后, 它的后代元素都继承这个属性;
• 给后代元素设置了属性, 无论继承过来的属性权重多高，都用自己设置的属性

常见的都具有继承性的属性：

font-size

font-family

font-weight

line-height

color

text-align

查看属性是否是继承过来的方法

☕️ 在调试工具查看是否有 Inherited from xxx

CSS属性继承计算值

  <div class="box">
    本身的内容
    <p>我是p元素</p>
  </div>

    .box{
      color: orange;
      /* em相对于父记元素（浏览器默认字体大小为16px） */
      font-size: 2em;/*32px*/
    }
     /* 
             本来p元素相对于父级div元素 2em=32*2=64px，
             因为继承计算值所以p元素字体大小也为32px
     */
     /* p{
      font-size: 2em;
     } */