每日一练:css关键词：inherit、initial、revert、unset解释

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;
    }

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