在一些APP中经常看到这样的九宫格设计。当缩略图少于9个时，将正常排列。当缩略图超过9个时，会提示还剩多少个缩略图，如下：如何用纯CSS实现这个效果？一起来看看吧1、九方格的布局很简单。一个非常常见的九格网格布局使用grid...这里的正方形很容易用aspect-ratio实现，对应的CSS如下。列表{位置：相对；显示：网格；宽度：300px；保证金：自动；网格模板列：重复（3,1fr）；列表样式：无；填充：0；gap:2px;}.item{aspect-ratio:1;/*widthandheightratio1:1*/}的效果如下那么，当张数大于9时如何自动提示剩余张数床单？然后往下看2.CSS计数器一提到序列，我们自然会想到CSS计数器。现在我们添加计数器。列表{/*...*/计数器重置：计数；/*初始化*/}然后在每个Item中显示数字，可以使用伪元素::after.item{counter-increment:count;}.item::after{content:counter(count);/*其他样式*/display:grid;高度：100%；地点内容：中心；字体大小：30px；color:#fff;}这样就可以得到如下效果。显示了数字，但是还有两个问题：当数字超过9时，超过的图片不会被隐藏。数量不是多余图片的数量，而是总数3。隐藏多余图片其实非常简单。由于数量是固定的，所以只需要使用选择器nth-child配合~即可实现.item:nth-child(9)~.item{/*选择第9个及以后的元素*/visibility:hidden;}这个地方通过visibility:hidden把超出的图片隐藏起来，原因是这个属性不会影响计数器的计算，如果使用display:none会跳过计数。1开始计数，那么最后一个计数就是整个链表的个数，但是我们可以指定从第10个开始计数，会有什么效果呢？为了演示方便，暂时打开hidden.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;宽度：计算（100%/3-1px）；反增：计数；可见性：隐藏；右：0；bottom:0;}.item:nth-child(9)~.item:last-child::after{可见性：可见；background-color:rgba(0,0,0,.2);}这样纯CSS就可以自动提示剩余图片效果演示如下。这里的add和remove是为了演示节点数的动态修改，与交互逻辑无关。完整代码可以访问list-counter(codepen.io)5.其他初始化方法在前面的实现方法中，我们手动指定from.item:nth-child(9)~.item{/*从第10个元素开始计数*/counter-increment:count;}其实还有一种方式值得尝试，就是直接指定计数器的初始值，默认为0，现在可以改成-9，实现如下。李斯t{/*...*/计数器重置：计数-9；/*Initializeto-9*/}不同的初始化思路，其他和之前的逻辑是一样的，完整的代码可以访问list-counter-reset(codepen.io)6.总结和解释这个案例到这里就结束了，一个低成本的CSStrick，虽然不多，但是很实用，尤其是选择器的使用，说不定以后会用到CSS计数器的使用，可以说是非常灵活强大，应该可以达到更实用的效果通过仔细挖掘。这里总结一下：如果不考虑兼容性，优先使用网格布局。自适应方块可以使用aspect-ratio来实现，遇到序列相关的布局，优先使用CSS计数器。灵活使用CSS选择器。nth-child(n)和~可以结合起来选择第n个元素之后的元素。您可以指定从第n个元素开始计数。您可以指定计数器的初始值。CSS计数器没有兼容性问题，可以放心使用。如果觉得不错，对你有帮助，请点赞，收藏，转发???
