每日一练:css关键词:inherit、initial、revert、unset解释
  Tr4xAwbYZfcx 2023年11月30日 19 0

1、inherit (继承)

  • inherit 关键词用于将一个属性值设置为其父元素的相同属性值。
  • 它是一种实现样式继承的方式,使子元素继承父元素的样式属性。
  • 如果父元素没有明确定义该属性,子元素将继承到该属性的默认值。
  • 这个关键词通常用于处理文本属性,如文本颜色、字体等。
<div>
        <p>这是一个段落</p>
    </div>
div{
        color: red;
    }
    p{
        color: inherit; // p元素继承div元素的color属性值
    }

2、initial (初始)

  • initial 关键词将属性的值重置css属性中的默认值。
  • 无论之前的样式设置如何,initial 都会将属性还原为浏览器默认设置。
<div>
        <p>这是一个段落</p>
    </div>
div{
        color: red;
    }
    p{
        color: initial;// p元素的color属性值重置为浏览器默认值
    }

3、unset(未设置)

  • unset 关键词将属性值重置为继承值,如果没有继承值,则将其重置为css属性的默认值。
  • 这个关键词综合了 inherit 和 initial 的行为。
<div>
        <p>这是一个段落</p>
    </div>
div{
        color: red;
    }
    p{
        color: unset;// p元素的color属性值重置为继承值
    }

4、revert(还原)

  • revert 关键词将属性值重置为继承值,如果没有继承值,则将其重置为浏览器的内置样式。
<div>
        <p>这是一个段落</p>
    </div>
div{
        color: red;
    }
    p{
        color: revert;
    }

长风破浪会有时,直挂云帆济沧海



【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月30日 0

暂无评论

推荐阅读
Tr4xAwbYZfcx