应用实战

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 下的所有 div 的 margin-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 {
        /* 清除颜色、字体大小样式 */
        /* 如果样式可以继承则继承自父元素 */
        /* 否则设置为初始值 */
        color: unset;
        font-size: 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 {
    color: unset;
    font-size: unset;
}

</style>