css中的counter-increment屬性

有些情況下需要將網(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);
}
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容