点亮CSS秘诀：initial、inherit、unset与revert的奥义

2023-12-27 06:49:36

当您踏入CSS世界的浩瀚之境，您不可避免地会遇到initial、inherit、unset与revert这几个关键词。它们像四位守护神，主宰着样式的命运，决定着网页元素的呈现方式。只有掌握了这四者的奥义，您才能真正成为CSS领域的魔法师，随心所欲地改变网页的样貌。

initial：初始之源

初始，代表着一切的开始。在CSS的世界里，initial一词指的是元素的初始值，也就是元素在没有受到任何样式影响时的默认状态。如果元素没有被赋予任何样式，那么它的属性值就会自动变为initial，也就是其初始值。

举个例子，让我们看看一个段落元素的初始值是什么。

p {
  font-size: initial;
  color: initial;
  font-family: initial;
}

在上述代码中，段落元素的font-size、color和font-family属性都被设置为initial。这意味着什么？这意味着这些属性的值都是其初始值。段落的字体大小将是浏览器默认的字体大小，通常为16px；段落的颜色将是浏览器的默认颜色，通常为黑色；段落的字体将是浏览器默认的字体，通常是Helvetica或Arial。

因此，initial代表着一切的开始，是元素在没有受到任何样式影响时的默认状态。

inherit：传承之道

inherit一词在CSS中意为继承，是指元素从其父元素继承样式。也就是说，如果元素没有被赋予某个属性的样式，那么它将从其父元素继承该属性的样式。

例如，我们有一个div元素，它里面包含一个p元素。如果div元素的color属性被设置为红色，那么p元素的color属性将自动变为红色，因为p元素继承了div元素的color属性。

div {
  color: red;
}

p {
  color: inherit;
}

在上述代码中，p元素的color属性被设置为inherit，这意味着它将从其父元素div继承color属性。因此，p元素的颜色将是红色，因为div元素的color属性被设置为红色。

因此，inherit代表着继承之道，是指元素从其父元素继承样式。

unset：无为之境

unset一词在CSS中意为不设置，是指元素的样式被重置为其初始值。也就是说，如果元素被赋予了某个属性的样式，那么使用unset可以将该属性的样式重置为其初始值。

例如，我们有一个div元素，它的color属性被设置为红色。如果我们想将div元素的颜色重置为其初始值，那么我们可以使用unset。

div {
  color: red;
}

div {
  color: unset;
}

在上述代码中，div元素的color属性先被设置为红色，然后又被设置为unset。这意味着div元素的颜色将被重置为其初始值，也就是浏览器默认的颜色，通常为黑色。

因此，unset代表着无为之境，是指元素的样式被重置为其初始值。

revert：时光逆流

revert一词在CSS中意为还原，是指元素的样式被还原到其上一个有效值。也就是说，如果元素的样式被修改过，那么使用revert可以将该元素的样式还原到其上一个有效值。

例如，我们有一个div元素，它的color属性先被设置为红色，然后又被设置为蓝色。如果我们想将div元素的颜色还原到红色，那么我们可以使用revert。

div {
  color: red;
}

div {
  color: blue;
}

div {
  color: revert;
}

在上述代码中，div元素的color属性先被设置为红色，然后又被设置为蓝色，最后又被设置为revert。这意味着div元素的颜色将被还原到其上一个有效值，也就是红色。

因此，revert代表着时光逆流，是指元素的样式被还原到其上一个有效值。

四大关键词的应用场景

现在，您已经了解了initial、inherit、unset和revert这四个关键词的含义。那么，您应该如何将它们应用到实际工作中呢？

initial ：initial通常用于重置元素的样式，使其恢复到其初始值。例如，您可以在一个元素上使用initial来清除所有样式，然后重新开始。
inherit ：inherit通常用于让元素继承其父元素的样式。例如，您可以让一个段落元素继承其父元素的字体大小和颜色。
unset ：unset通常用于重置元素的某个属性的样式，使其恢复到其初始值。例如，您可以使用unset来重置一个元素的字体大小，使其变为浏览器的默认字体大小。
revert ：revert通常用于将元素的样式还原到其上一个有效值。例如，您可以使用revert来将一个元素的字体大小还原到其父元素的字体大小。