当前位置：首页 > news >正文

CSS 的 inherit、initial、revert 和 unset区别

news 来源：原创 2025/5/13 12:08:54

在 CSS 中，inherit、initial、revert 和 unset 是用于控制属性值的特殊关键字。它们的作用如下：

1. `inherit`

作用：将属性的值设置为父元素的相同属性的值。
使用场景：当你希望某个元素继承父元素的样式时。

示例：

div {
    color: inherit; /* 继承父元素的颜色 */
}

2. `initial`

作用：将属性的值重置为 CSS 规范中定义的初始值（默认值）。
使用场景：当你希望清除某个属性的样式，恢复到默认状态时。

示例：

div {
    color: initial; /* 重置为默认颜色（通常是黑色） */
}

3. `revert`

作用：将属性的值重置为浏览器默认样式表（用户代理样式）中定义的值，或者继承父元素的值（如果该属性是可继承的）。
使用场景：当你希望撤销自定义样式，恢复到浏览器默认样式时。

示例：

div {
    color: revert; /* 恢复到浏览器默认颜色 */
}

4. `unset`

作用：
- 如果属性是可继承的（如 color、font-family），则行为类似于 inherit，继承父元素的值。
- 如果属性是不可继承的（如 display、background），则行为类似于 initial，重置为默认值。
使用场景：当你希望根据属性的特性自动选择是继承还是重置时。

示例：

div {
    color: unset; /* 如果是可继承属性，则继承父元素的值 */
    display: unset; /* 如果是不可继承属性，则重置为默认值 */
}

对比总结：

关键字	行为
`inherit`	继承父元素的值。
`initial`	重置为 CSS 规范中的初始值（默认值）。
`revert`	重置为浏览器默认样式表中的值，或继承父元素的值（如果可继承）。
`unset`	如果是可继承属性，则继承父元素的值；否则重置为默认值。

示例代码：

<div class="parent">
    Parent Text
    <div class="child">Child Text</div>
</div>

.parent {
    color: blue;
    font-size: 20px;
}

.child {
    color: inherit; /* 继承父元素的蓝色 */
    font-size: initial; /* 重置为默认字体大小（通常是16px） */
    background-color: unset; /* 如果是不可继承属性，则重置为默认值 */
    border: revert; /* 恢复到浏览器默认的边框样式 */
}