第十五节:继承&属性值的计算过程

继承

子元素会继承父元素的某些CSS属性

通常,跟文字内容相关的属性都可以被继承,也可以在MDN里面直接查看属性是否是可以继承的




    
    
    Document
    


    

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate impedit ipsa nobis quis consectetur sequi praesentium animi repellat sit, facere odio cupiditate? Eligendi, esse consectetur voluptate sunt similique ipsum quasi.

  • Lorem.
  • Id!
  • Quibusdam.
  • Veritatis!
  • Temporibus?
  • Aliquam.
  • Nemo!
  • Doloribus.
  • Earum?
  • Itaque?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, a sequi non quas repellendus amet vero laudantium ex aut omnis possimus, natus, obcaecati eaque dignissimos ad similique tenetur commodi facere?

属性值的计算过程

浏览器是一个元素一个元素 依次渲染,顺序按照页面文档树形目录渲染的

渲染每个元素的前提条件:该元素的所有CSS树形必须有值

一个元素,从所有属性都没有值,到所有的属性都有值,这个计算过程叫做属性值计算过程
例子:




    
    
    Document
    


    
例子

Lorem ipsum dolor sit.

第十五节:继承&属性值的计算过程_第1张图片

上面的例子中,a元素是没有继承div的颜色的,这是因为
a元素在浏览器的默认样式表中已经确认了颜色和样式。所以可以在重置样式表中重置一下a元素的样式表

a {
    /* 没有下划线,颜色继承父元素 */
    text-decoration: none;
    color: inherit;
}

特殊的2个CSS取值

  • inherit:手动(强制)继承,将父元素的值取出应用到该元素
  • innitial:初始值,将该属性设置为默认值



    
    
    Document
    


    

你可能感兴趣的:(第十五节:继承&属性值的计算过程)