汶上微信公众号开发【汶上网络推广】汶上建站、汶上网站维护、汶上网页制作、汶上微信小程序代运营公司

汶上微信公众号开发【汶上网络推广】汶上建站、汶上网站维护、汶上网页制作、汶上微信小程序代运营公司

汶上地处山东省西南部，东临古城兖州，西接水泊梁山，南依微山湖，北枕东岳泰山。东经116°40′—116°18′北纬35°31′—35°36′，大部分地区处于平原地带，汶上县属北温带大陆性季风湿润气候区。 [1] 

汶上县境内有大汶河，小汶河流经北部以及西部，又有泉河等河流流经中东部而后汇流到小汶河，包括县域下面的地下水也全部源于汶水的补给，汶上整个县域地处汶水之上，因此得名汶上。

2012年，汶上县地区生产总值完成200亿元。2018年12月13日，汶上县入选中国特色农产品优势区名单。 [2]  2019年2月2日，被国家中医药管理局评为县级全国基层中医药工作先进单位。 [3]  2020年7月29日，入选2017-2019周期国家卫生乡镇（县城）命名名单。 [4] 

本文介绍一个Web前端实现小技巧。

一、需求与问题描述

需求：列表默认最多显示3项，点击更多按钮显示剩余列表项。

于是有CSS如下：

li:nth-child(n+4) {
    display: none;
}

HTML如下：

<ul id="ul">
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
  <li>选项4</li>
  <li>选项5</li>
</ul>
<p><button id="b1">更多</button></p>

点击更多按钮，让隐藏的<li>元素显示。

不少前端开发会想到使用下面的CSS代码让元素显示：

li.style.display = 'block';

乍一看，这么实现没有任何问题，实际上，看看下面的实际渲染效果图就知道为什么不行了：

可以看到，显示的列表的项目符号没有了。

原因很简单，<li>元素默认的display计算值不是'block'，而是'list-item'。

实际开发的时候，'list-item'不一定记得住，此时可以使用 revert 关键字代替，也就是甭管什么标签，全部使用浏览器默认的display计算值。

li.style.display = 'revert';

此时，列表显示的同时项目符号也正常显示了，如下截图所示：

您可以狠狠地点击这里：列表display不同值显示对比demo

二、revert关键字是干嘛的

revert关键字可以让当前元素的样式还原成浏览器内置的样式。

目前现代浏览器均已支持。

revert关键字有时候会和CSS all属性一起使用，可以将某个控件元素完全还原为浏览器默认的样子。

例如<progress>进度条效果在iOS端很好看，很有质感，无需自定义样式，则我们就可以all:revert一键还原成系统默认的界面样式。

/* 仅iOS Safari有效 */@supports (-webkit-overflow-scrolling: touch) {
    progress {
        all: revert;
    }
}

又例如写了两个美美的按钮：

希望还是使用浏览器原生的质朴的按钮，则可以对按钮元素设置all:revert进行还原。

会得到如下所示的按钮效果：

三、其他display场景示意

revert控制元素显示最适合用在公用的组件开发中，例如实现一个选项卡切换，或者手风琴切换效果，其中就有对元素的显示控制。

此时，可以告别传统的 display:block 显示，也无需判断原始的display计算值再设置，直接使用 display:revert试试。

这样，元素显示的时候，究竟是内联、块状直接通过HTML标签区分即可。

例如 <span>元素显示为inline，<div>、<p>元素显示为block，<table>元素显示为table等。

貌似没有哪个HTML元素默认的display计算值是 flex 或者 grid。

所以，revert也只能说是是个不错的方案，但还不是终极方案。

四、其他全局关键字

CSS世界中还有其他3个全局关键字，分别是：inherit、initial、unset。

然后根据实用性和兼容性我整理了一个全局关键字属性值评价表，如下所示：

不过非本文重点，不展开介绍。

汶上微信公众号开发【汶上网络推广】汶上建站、汶上网站维护、汶上网页制作、汶上微信小程序代运营公司