本文将为您介绍使用纯CSS实现九宫格中提示次数超标的方法。 有一定的参考价值，有需要的同学可以参考一下，希望对大家有所帮助。
我经常在个别应用程序中听到这样的九宫格设计。 当缩略图少于9个时，将正常排列。 当缩略图超过9个时，会提示还剩多少个缩略图，如下：
如何使用纯CSS来实现这个效果？我们上去看看
1、九宫格布局
布局很简单，一个很常见的九宫格布局css计数器，这里使用网格
-
...
这里的正圆可以用aspect-ratio轻松实现，对应的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;/*宽高比1:1*/
}
疗效如下
那么，当超过9张时，如何手动提示剩余张数呢？接着往下看
2.CSS计数器
说到序列，自然会想到CSS计数器，现在我们添加计数器
.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;
}
登录后复制
这样可以达到以下效果
数字显示出来了，但是现在有两个问题：
3.隐藏超出的图片
这个看起来很简单，因为数量是固定的，只需要配合选择器nth-child~就可以实现
.item:nth-child(9)~.item{
/*选择第9个以后的元素*/
visibility: hidden;
}
登录后复制
这个地方使用visibility:hidden来隐藏多余的图片，因为这个属性不会影响计数器的计算，如果使用display:none，则会跳过计数
四、统计数量超标
目前因为是从第一个开始计数，所以最后一个计数就是整个列表的个数，我们可以指定从第十个开始计数，会得到什么效果？为了演示方便，暂时打开隐藏
.item{
/*counter-increment: count;*/
}
.item:nth-child(9)~.item{
/*从第10个开始计数*/
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手动提示剩余图片的疗效。 演示如下
这里的add和remove是为了演示节点数量的动态变化，与交互逻辑无关
完整代码可以在 list-counter(codepen.io) 访问
5.其他初始化方法
在前面的实现方法中，我们自动指定从第10个元素开始计数
.item:nth-child(9)~.item{
/*从第10个开始计数*/
counter-increment: count;
}
登录后复制
不过，还有一个方法值得一试，那就是直接指定计数器的初始值，默认是0，现在可以改为-9，实现如下
.list{
/*...*/
counter-reset: count -9; /*初始化为-9*/
}
登录后复制
初始化思路不同，其余逻辑和之前一样，完整代码可以访问list-counter-reset(codepen.io)
六、总结与说明
这个案例到这里就结束了css计数器，一个低成本的CSS技巧，虽然不多，但是很实用，尤其是选择器的使用，说不定以后每次都会用到。 CSS计数器可以说是非常灵活和强大的。 仔细挖掘应该能够取得更多的实际效果。 总结如下：
