verilog计数器代码大全网站人数计数器代码 _计数器

经常在某些 app 中看到这样的九宫格设计。当缩略图不足 9 张时，正常排列，当超过 9 张时，会提示还剩多少张，如下：
如何使用纯 CSS 实现这一效果呢？一起来看看吧
一、九宫格布局布局就很简单了，一个很普通的九宫格布局，这里使用 grid

...

这里正方形可以用aspect-ratio[1]简易实现，对应的 CSS 如下

.list{position: relative;display: grid;width: 300px;margin: auto;grid-template-columns: repeat(3,1fr);list-style: none;padding: 0;gap: 2px;}.item{aspect-ratio: 1;}

效果如下
那么，如何实现在超过9张时自动提示剩余张数呢？接着往下看
二、CSS 计数器提到序列，自然会想到 CSS 计数器[2]，现在我们加上计数器
.list{counter-reset: count; } 然后在每一个 .item显示数字，可以用到伪元素::after

.item{counter-increment: count;}.item::after{content: counter(count);display: grid;height: 100%;place-content: center;font-size: 30px;color: #fff;}

这样可以得到如下效果
数字是显示出来了，不过现在还有两个问题：
1.数量超过9个时，不会隐藏超过的图片2.这个数字不是超出图片的数量，而是总数
三、隐藏超出的图片这个其实非常容易，由于数量是固定的，只需要利用选择器nth-child配合~就能实现
.item:nth-child(9)~.item{visibility: hidden;}这个地方是通过 visibility: hidden隐藏超过的图片，原因是该属性不会影响计数器的计算，如果使用display:none则会跳过计数
四、统计超过的数量目前由于是从第1个开始计数，所以最后统计的是整个列表的数量，但是我们可以指定从第10个才开始计数，会得到什么效果呢？为了方便演示，暂时把隐藏打开
.item{}.item:nth-child(9)~.item{counter-increment: count;}.item:nth-child(9)~.item::after{content: counter(count);} 可以看到，从第10个开始计数后，最后一个数字就表示还剩余多少张
现在把最后一张放在右下角就行了（绝对定位），最后一张可以用.item:nth-child(9)~.item:last-child来选择，表示第9张后面的最后一张图片，实现如下

.item:nth-child(9)~.item{position: absolute;width: calc(100% / 3 - 1px);counter-increment: count;visibility: hidden;right: 0;bottom: 0;}.item:nth-child(9)~.item:last-child::after{visibility: visible;background-color: rgba(0,0,0,.2);}

这样就实现了纯 CSS 自动提示剩余图片的效果，演示如下