CSS 所有属性都有三个共同的属性值:

  • initial:初始值。
  • inherit:继承。
  • unset:如果属性可以继承等同于 inherit,不能继承等同于 initial

$$tip

unset 最常用的场景是取消一个存在定义的属性值,还可以使用 all 来设置所有的属性。

$$

$$tip

有关样式是否可以继承可以参考 w3c 的属性表格

$$

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/wvPRwVg?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

应用实战

initial

某些样式如果想让它回归到初始值就可以使用 initial ,比如以下继承来的颜色就可以设置回初始值。

<nav class="navigation">
    <p>三眼鸭</p>
    <p class="initial">三眼牛牛</p>
</nav>
<style>
    .navigation {
        color: teal;
    }

    .initial {
        color: initial;
    }
</style>

$$demo

<nav class="navigation"> <p>三眼鸭</p> <p class="initial">三眼牛牛</p> </nav> <style> .navigation { color: teal; }

.initial {
    color: initial;
}

</style>

$$

inherit

inherit 可以使本不继承的属性继承自父元素,实现一些特殊的效果。比如 a 元素的颜色和修饰线样式本身是不继承的,这里设置为 inherit,直接可以设置父元素的颜色统一修改所有文本的颜色。

<nav class="navigation">
    <h1>三眼鸭的编程教室</h1>
    <a href="#">三眼鸭</a>
    <a class="inherit" href="#">三眼牛</a>
    <a class="inherit" href="#">三眼鸡</a>
</nav>
<style>
    .navigation {
        /* 修改这里的颜色就可以统一修改 */
        color: teal;
    }

    .inherit {
        color: inherit;
        text-decoration: inherit;
    }
</style>

$$demo

<nav class="navigation"> <h1>三眼鸭的编程教室</h1> <a href="#">三眼鸭</a> <a class="inherit" href="#">三眼牛</a> <a class="inherit" href="#">三眼鸡</a> </nav> <style> .navigation { /* 修改这里的颜色就可以统一修改 */ color: teal; }

.inherit {
    color: inherit;
    text-decoration: inherit;
}

</style>

$$

又比如 margin-left 默认是不可继承的,这里显式地将 .container 下的所有 divmargin-left 继承自父元素,实现了一种层叠的效果。

<div class="container">
    <p>三眼鸭</p>
    <div>
        <p>三眼牛</p>
        <p>三眼鸡</p>
        <div>
            <p>三眼猫</p>
            <p>三眼狗</p>
        </div>
    </div>
</div>
<style>
    .container {
        margin-left: 2em;
    }

    .container div {
        margin-left: inherit;
    }
</style>

$$demo

<div class="container"> <p>三眼鸭</p> <div> <p>三眼牛</p> <p>三眼鸡</p> <div> <p>三眼猫</p> <p>三眼狗</p> </div> </div> </div> <style> .container { margin-left: 2em; }

.container div {
    margin-left: inherit;
}

</style>

$$

unset

unset 通常用来清除当前定义的样式。

<nav class="navigation">
    <p>三眼鸭</p>
    <p class="name">三眼牛牛</p>
    <p class="name unset">三眼猫猫</p>
</nav>
<style>
    .navigation {
        color: teal;
    }

    .name {
        /* 你同事写的样式 */
        /* 你觉得太丑了想清除掉 */
        color: red;
        font-size: 24px;
    }

    .unset {
        /* 清除所有样式 */
        /* 如果样式可以继承则继承自父元素 */
        /* 否则设置为初始值 */
        all: unset;
    }
</style>

$$demo

<nav class="navigation"> <p>三眼鸭</p> <p class="name">三眼牛牛</p> <p class="name unset">三眼猫猫</p> </nav> <style> .navigation { color: teal; }

.name {
    color: red;
    font-size: 24px;
}

.unset {
    /* 清除所有样式 */
    /* 如果样式可以继承则继承自父元素 */
    /* 否则设置为初始值 */
    all: unset;
}

</style>

$$