简单一句CSS还原页面样式

标题多少UC震惊题的味道了 咳咳。。。

在日常开发中，我们经常需要对元素做一些显示/隐藏切换，例如常用的 display

display: block;
diaplay: none;

比如有一个需求，要求对列表最多展示3项，点击按钮后全部展示。

/* 隐藏 */
li:nth-child(n+4) {
    display: none;
}
/* 展示 */
li.style.display = 'block';

初步看来，没什么毛病，但是。

很明显后面两项的 li 样式丢失了，因为 li 标签默认的属性为 diaplay: list-item，改为 list-item 后，确实正常了。

开发中，如果我们需要特意记住元素更改之前的diaplay属性未免太累了点（ v-if 、v-show 不在讨论范围内），有没有什么属性可以在切换时对 diaplay 进行还原呢？
那就是我们将要学习的 revert 属性。

revert

li.style.display = revert;

revert 关键字

将属性的级联值从其当前值恢复为当前元素revert的当前样式原点未进行任何更改时属性应具有的值。因此，如果该属性从其父级继承，则它会将属性重置为其继承值，否则重置为由用户代理的样式表（或用户样式，如果存在）建立的默认值。它可以应用于任何CSS属性，包括CSS简写属性。

一句话概括就有，就近还原，如果被revert的属性是继承自父级，则还原为父级。
举个🌰

<div class="father">
  <p class="p">文本</p>
</div>

.father{
  color: blue;
}
.p{
  color: red;
}

默认情况下p标签内的文本为红色，当我们更改color: revert时，p标签内的文本会变成蓝色，如果p为根元素，则标签内的文本会变成黑色。

如果想要一次性还原多个属性，可以使用all: revert

如上图，对文本设置的color、font-size、font-bold样式都被还原为浏览器默认的了。

除了 revert外，类似的关键词还有 inherit 、initial 、unset

inherit

inherit 使元素的属性继承子父级，可以运用与任意属性，当然也包括all

{
    color: inherit;
    font-size: inherit;
}
{
    all: inherit;
}

initial

initial 表示将元素的某个属性恢复至初始值
举个🌰

<div class="father">
  <p class="p">文本</p>  
</div>

.father{
  color: blue;
}
.p{
  color: red;
  font-size: 50px;
  font-weight: 600;
}
.p{
  color: initial;
}

如上图，我们对 p 标签使用了 color: initial; 将 color 恢复至默认值，此时，文本颜色会变为黑色，但是大小跟字重保留，这一点不同于 revert

那么将 initial 作用在元素的 all 属性上呢？我们期望将元素的所以属性还原至浏览器默认

.p{
  all: initial;
}

文本颜色变成了黑色，字体大小跟字重也恢复了默认状态，看似满足了我们的要求，接下来作用在 button 标签上试一下:

.btn{
  all: initial;
}

我们期望的结果跟实际结果

很明显，不一致，button 的背景色、边框包括文本样式都发生了变化。

在MDN上看到以下标注

不应将初始值与浏览器样式表指定的值混淆

这下清楚了 初始值 != 浏览器默认值，所以对 button 使用 color: initial; 并没有达到预期效果，当然上面的 p 标签其实也是有所偏差的，所以，⚠️使用 color: initial; 要慎重

unset

如果属性可以继承自父级，并且在父级中有定义，设置 unset 则将该属性的值设置为继承自父级的值，否则设置为初始值。
也就是属性是可继承的，且父级中有定义 等同于 inherit ，否则，等同于 initial

在这里就不实践了。