有些情況下需要將網(wǎng)頁中的最新排行或者是點擊排行靠前的幾篇文章用項目序號標注出來。比如說,給10篇文章加上1-10的項目序號,并且在前三篇文章前標注紅色的顏色,方便用戶閱讀??赡苡泻芏喾椒ㄈネ瓿?,有的人會使用額外標簽添span或者i內(nèi)添加數(shù)字用css樣式控制,還有人會用偽元素before與額外標簽結合使用等情況。
最近時間,偶然看到css中的counter-increment屬性可以簡單方面的給標簽前面添加項目序號,說實話這個屬性我還是第一次見到,它就像一個for循環(huán)可以自動給li標簽或者其他標簽加項目序號。具體介紹可以到w3c教程網(wǎng)去瞧瞧。
在這介紹下我的站是如何給文章li標簽前加序號。
首先,給li標簽定義一個計數(shù)器的名字,比如listxh。
li { counter-increment: listxh;}
然后,給每個li標簽前加序號。
li:before {
content: counter(listxh);
}