這篇文章主要介紹“CSS怎么實現(xiàn)九宮格提示超出數(shù)量”，在日常操作中，相信很多人在CSS怎么實現(xiàn)九宮格提示超出數(shù)量問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS怎么實現(xiàn)九宮格提示超出數(shù)量”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
創(chuàng)新互聯(lián)建站堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的碧江網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
經(jīng)常在某些 app 中看到這樣的九宮格設(shè)計。當(dāng)縮略圖不足 9 張時，正常排列，當(dāng)超過 9 張時，會提示還剩多少張，如下：
如何使用純 CSS 實現(xiàn)這一效果呢？一起來看看吧
一、九宮格布局
布局就很簡單了，一個很普通的九宮格布局，這里使用 grid
...
這里正方形可以用aspect-ratio簡易實現(xiàn)，對應(yīng)的 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ù)器，現(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)在還有兩個問題：
三、 隱藏超出的圖片
這個其實非常容易，由于數(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)
五、其他初始化方式
在上一種實現(xiàn)方式中，我們是手動指定從第 10 個元素開始計數(shù)的
.item:nth-child(9)~.item{
/*從第10個開始計數(shù)*/
counter-increment: count;
}其實，還有一種方式也值得一試，那就是直接指定計數(shù)器的初始值，默認(rèn)為0，現(xiàn)在改為 -9 就可以了，實現(xiàn)如下
.list{
/*...*/
counter-reset: count -9; /*初始化為-9*/
}
不一樣的初始化思路，剩下的就和之前一樣的邏輯了，完整代碼可訪問 list-counter-reset (codepen.io)
六、總結(jié)和說明
這個案例到這里就結(jié)束了，一個低成本的 CSS 小技巧，雖然不多，但是非常實用，尤其是選擇器的運(yùn)用，說不定將來哪次就會用上了。CSS 計數(shù)器可以說是非常靈活和強(qiáng)大了，仔細(xì)挖掘應(yīng)該還能實現(xiàn)更多實用的效果，這里總結(jié)一下：
九宮格布局如果不考慮兼容性優(yōu)先使用 grid 布局
自適應(yīng)正方形可以使用 aspect-ratio 實現(xiàn)
遇到和序列有關(guān)的布局，優(yōu)先考慮 CSS 計數(shù)器
靈活運(yùn)用 CSS 選擇器，nth-child(n)和 ~可以組合選擇第 n 個以后的元素
可以指定從第 n 個元素開始計數(shù)
可以指定計數(shù)器的初始值
CSS 計數(shù)器沒有兼容性問題，可以放心使用
到此，關(guān)于“CSS怎么實現(xiàn)九宮格提示超出數(shù)量”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
分享文章：CSS怎么實現(xiàn)九宮格提示超出數(shù)量
分享URL：http://weahome.cn/article/jsgjph.html
重慶分公司
重慶分公司
