文章插圖
經(jīng)常在某些 app 中看到這樣的九宮格設計 。當縮略圖不足 9 張時，正常排列，當超過 9 張時，會提示還剩多少張，如下：
如何使用純 CSS 實現(xiàn)這一效果呢？一起來看看吧
一、九宮格布局布局就很簡單了，一個很普通的九宮格布局，這里使用 grid
<ul class="list"><li class="item"></li><li class="item"></li><li class="item"></li>...</ul>這里正方形可以用aspect-ratio[1]簡易實現(xiàn)，對應的 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*/}效果如下
那么，如何實現(xiàn)在超過9張時自動提示剩余張數(shù)呢？接著往下看
二、CSS 計數(shù)器提到序列，自然會想到 CSS 計數(shù)器[2]，現(xiàn)在我們加上計數(shù)器
.list{/*...*/counter-reset: count; /*初始化*/}然后在每一個 .item顯示數(shù)字，可以用到偽元素::after
.item{counter-increment: count;}.item::after{content: counter(count);/*其他樣式*/display: grid;height: 100%;place-content: center;font-size: 30px;color: #fff;}這樣可以得到如下效果
數(shù)字是顯示出來了，不過現(xiàn)在還有兩個問題：
1.數(shù)量超過9個時，不會隱藏超過的圖片2.這個數(shù)字不是超出圖片的數(shù)量，而是總數(shù)
三、 隱藏超出的圖片這個其實非常容易，由于數(shù)量是固定的，只需要利用選擇器nth-child配合~就能實現(xiàn)
.item:nth-child(9)~.item{/*選擇第9個以后的元素*/visibility: hidden;}這個地方是通過 visibility: hidden隱藏超過的圖片，原因是該屬性不會影響計數(shù)器的計算，如果使用display:none則會跳過計數(shù)
四、 統(tǒng)計超過的數(shù)量目前由于是從第1個開始計數(shù)，所以最后統(tǒng)計的是整個列表的數(shù)量，但是我們可以指定從第10個才開始計數(shù)，會得到什么效果呢？為了方便演示，暫時把隱藏打開
.item{/*counter-increment: count;*/}.item:nth-child(9)~.item{/*從第10個開始計數(shù)*/counter-increment: count;}.item:nth-child(9)~.item::after{content: counter(count);} 可以看到，從第10個開始計數(shù)后，最后一個數(shù)字就表示還剩余多少張
現(xiàn)在把最后一張放在右下角就行了（絕對定位），最后一張可以用.item:nth-child(9)~.item:last-child來選擇，表示第9張后面的最后一張圖片，實現(xiàn)如下
.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);}這樣就實現(xiàn)了純 CSS 自動提示剩余圖片的效果，演示如下
這里的 add 和 remove 是演示動態(tài)修改節(jié)點數(shù)量，與交互邏輯無關(guān)
完整代碼可訪問 list-counter (codepen.io)[3]
五、其他初始化方式在上一種實現(xiàn)方式中，我們是手動指定從第 10 個元素開始計數(shù)的
.item:nth-child(9)~.item{/*從第10個開始計數(shù)*/counter-increment: count;}其實，還有一種方式也值得一試，那就是直接指定計數(shù)器的初始值，默認為0，現(xiàn)在改為 -9 就可以了，實現(xiàn)如下
.list{/*...*/counter-reset: count -9; /*初始化為-9*/}不一樣的初始化思路，剩下的就和之前一樣的邏輯了，完整代碼可訪問 list-counter-reset (codepen.io)[4]
六、總結(jié)和說明這個案例到這里就結(jié)束了，一個低成本的 CSS 小技巧，雖然不多，但是非常實用，尤其是選擇器的運用，說不定將來哪次就會用上了 。CSS 計數(shù)器可以說是非常靈活和強大了，仔細挖掘應該還能實現(xiàn)更多實用的效果，這里總結(jié)一下：
九宮格布局如果不考慮兼容性優(yōu)先使用 grid 布局自適應正方形可以使用 aspect-ratio 實現(xiàn)遇到和序列有關(guān)的布局，優(yōu)先考慮 CSS 計數(shù)器靈活運用 CSS 選擇器，nth-child(n)和 ~ 可以組合選擇第 n 個以后的元素可以指定從第 n 個元素開始計數(shù)可以指定計數(shù)器的初始值CSS 計數(shù)器沒有兼容性問題，可以放心使用

以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請您及時就醫(yī)或請專業(yè)人士給予相關(guān)指導!

「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對您有所幫助：

• 程序員代碼分享 程序員開發(fā)網(wǎng)站賺錢
• js輪播圖實現(xiàn)簡單代碼 js實現(xiàn)圖片輪播帶滑動
• python貪吃蛇最簡單代碼 python的idle怎么用
• 網(wǎng)站底部友情鏈接代碼 免費友情鏈接交換平臺
• java畫圖像表格 java繪圖程序代碼
• 判斷閏年的c語言程序 九九乘法表c語言編程代碼
• 基于ssm框架的圖書管理系統(tǒng) 網(wǎng)站框架模板代碼
• css字體樣式代碼大全 html好看的字體樣式代碼
• 高鐵跟火車的區(qū)別
• 免費的低代碼開發(fā)平臺 零代碼開發(fā)是什么