一、掘墓
很久很久以前,有一個美麗的公主,她有一頭秀麗的長髮……(人群中突然飛來一個鼠標,正中我額頭,幾個星星迸出,眼前一片漆黑,迷迷糊糊中隱隱聽到:MB, 正經點,我們過來不是聽童話故事滴!)
30min後,華佗給了個桃,半血復活,老實了~~
很久很久以前,我寫過一篇關於列表的文章 —— “HTML CSS列表元素ul,ol,dl的研究與應用”,算是個中長篇,只可惜因為年代久遠,被時間埋啊埋的,都快變成地下古董,不為人所知了。
“雖然文章已作古,此時亦可鬆鬆土”。有興趣的你可以看看,其中也有關於ol列表的介紹,只是呢,“官人雖被小姐提,只是碎語本無意”。因此,這裡有針對性的詳細介紹還是很有必要的,因為根據自己的經驗,一篇文章內容多而雜的時候,很多好的內容會湮沒在隨波中。
二、前世今生
type,start,value, 和reversed每個的生世是不一樣滴。reversed屬於新興人類,隨著HTML5來到這個世界的,顧名思意表“反轉”。而start和type都是在HTML4中被文革掉的,但是,現在,它們又回來了。//zxx:為什麼又回來呢?嘛,誰知道呢~~
我們都知道,CSS是負責表現,而且推薦各類表現都使用CSS完成。在HTML 4.01中,type屬性無奈地被list-style-type替代了(本是同根生,相煎何太急),而start和value屬性被無情地拋棄了,只有在使用content內容生成序列(掘墓吧,見part 4)的時候才發出一點微弱的氣息。
三、type屬性
對於ol列表,HTML中的type屬性跟CSS中的list-style-type實則一路貨色。如下對應表:
type屬性值及對應的列表計數類型
等同於list-style-type
type="1"
decimal(默認樣式)
type="a"
lower-alpha
type="A"
upper-alpha
type="i"
lower-roman
type="I"
upper-roman
當HTML中的type和CSS中的list-style-type同時出現的時候,list-style-type會優先與type,即顯示list-style-type對應值內容。如果CSS中未設置具體list-style-type值,自然type稱大王。
五、start和value屬性
這兩個屬性舉個板栗就知道什麼意思了。
您可以狠狠地點擊這裡:ol列表start屬性測試demool列表value屬性測試demo
這兩個demo頁面的效果是一模一樣滴,如下截圖(IE7獻醜):
想對應的HTML如下:
- SHUFFLE!/三界戀曲
- 撲殺天使
- 零之使魔
- 不要撒嬌哦/極樂天師/純情和尚俏尼姑
- to love/出包王女
- 撲殺天使
- 零之使魔
- 不要撒嬌哦/極樂天師/純情和尚俏尼姑
- to love/出包王女
暗香非輕雲,亦可月黃昏。
六、reverse降序
如下示例代碼:
- 2012-03-06是星期幾?
- 你有幾隻眼睛?
- 最小的自然數是?
支持的瀏覽器應該是下面這幅模樣:
對於不支持的瀏覽器(例如Chrome 16):
可見,目前瀏覽器對ol元素reversed屬性的支持還是有些弱滴(下一章節的兼容性表可見)。
三月時節雨綿綿,春意闌珊。
您可以狠狠地地點擊這裡:ol列表元素reverse屬性demo
雖然寫本文的時候,鮮有瀏覽器上面的demo出現想要的效果,但是,瀏覽器發展是迅速滴及時滴,相信在本文掩入黃土之前此demo可見天日。
七、兼容性表
參見下表:
屬性
IE
Firefox
Safari
Chrome
Opera
5.2 18
其中:我百了下,Chrome 18目前已經有下載(據說是面向開發者)(官方正式版還是Chrome 17);Safari 5.2也支持了ol元素reversed屬性,不過這個版本最近才向開發者開放。
另外,對於不支持reversed屬性的瀏覽器,效果的實現可以藉助於lists-reversed.js.
原作者： 和清科技