我們偶爾會(huì)遇到排行榜的設(shè)計(jì)说订，按序號(hào)羅列排名愚屁，前幾名會(huì)再加上圖片標(biāo)識(shí)死宣。比如螞蟻森林的排行榜或者簡書校園排行榜奸笤。
如果用 <li> 元素配合 list-style: decimal; 屬性惋啃，往往不能滿足設(shè)計(jì)需要，總會(huì)有個(gè)英文句號(hào)跟在數(shù)字后面监右。如果單獨(dú)加一個(gè)元素為了放序號(hào)和圖片边灭，似乎又有點(diǎn)小題大做。
這時(shí)可以嘗試用偽元素結(jié)合 counter-increment 屬性的方法健盒，簡單實(shí)現(xiàn)這種效果绒瘦。
counter-increment是 CSS 計(jì)數(shù)器称簿，計(jì)的是純數(shù)字的形式。首先給 <li> 元素添加 :before 偽元素惰帽，一般我們會(huì)把偽元素設(shè)置content: '';憨降，因?yàn)檫@樣偽元素才能生效，但是我們現(xiàn)在可以往 content 里填內(nèi)容该酗，填的就是計(jì)數(shù)出來的counter(li)授药。即：
content: counter(li);
counter-increment: li;
同時(shí)，給父元素 <ol> 或者 <ul> 加上：
counter-reset: li;
至于前三名的特殊圖片呜魄，用 :nth-of-type() 選擇器悔叽，再配合background-image 屬性的方法即可完成。
