首先介紹一下什么是ol元素。這里直接引用MDN里面的定義：The HTML <ol> Element (or HTML Ordered List Element) represents an ordered list of items.也就是說這個元素的包含的li元素是帶有數字序號的。為了更好闡述下面介紹的幾種方法，我們首先寫出一個有序列表：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>ol reversed</title> 6 </head> 7 <body> 8 <ol> 9 <li>item1: I'm a boy</li> 10 <li>item2: I'm a boy too</li> 11 <li>item3: Are you kidding me?</li> 12 </ol> 13 </body> 14 </html>
看到的效果就是：
到這里我們就發現一個神聖的有序列表產生了。
接下來就是介紹怎么實現元素ol的逆向排序顯示了。實現的方法是很多的，在這里介紹三種方法，如果您有更好的方法，歡迎在下面的評論中提出。這里提到的三種方法分別使用HTML、CSS和JavaScript實現，樣樣都有，隨你挑。
首先介紹一下HTML的實現方法，這個辦法應該是最簡單有效的，因為在HTML5中已經為這個標簽添加了一個屬性：reversed,方法也很簡單，只需要在ol元素的起始標簽中添加一個 reversed屬性，就能非常容易實現元素ol的降序排序顯示，我們來看一看效果：
1 <ol reversed> 2 <li>item1: I'm a boy</li> 3 <li>item2: I'm a boy too</li> 4 <li>item3: Are you kidding me?</li> 5 </ol>
生活就是這么容易，只需要一個單詞就實現了我們想要的效果。當然這個方法也是有所限制的，並不是所有的瀏覽器都是支持的，在這里同樣盜用MDN的一張圖來表達博主的意思：
需要注意的是，上面的表格雖然現實Opera不支持reversed屬性，但是博主用自己電腦上的opera24打開的時候，是能夠顯示倒序效果的，而IE瀏覽器，正如表格中顯示的一樣，直到IE11，仍然不支持這個屬性。
接下來介紹的就是用CSS實現的ol元素降序排序顯示了。這里的實現思路是這樣的：
- 不顯示系統默認的list-style
- 利用偽元素 :before在每個li標簽前面添加數字
具體的技術細節我們等會兒再分析，直接干脆利落的上代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>ol reversed</title> 6 <style type="text/css"> 7 ol.reverse { 8 list-style: none; 9 counter-reset: reverse 4; 10 } 11 ol.reverse > li:before { 12 content: counter(reverse) '.'; 13 display: block; 14 position: absolute; 15 left: -30px; 16 text-align: right; 17 width: 20px; 18 } 19 ol.reverse > li { 20 counter-increment: reverse -1; 21 position: relative; 22 } 23 </style> 24 </head> 25 <body> 26 <ol class = "reverse"> 27 <li>item1: I'm a boy</li> 28 <li>item2: I'm a boy too</li> 29 <li>item3: Are you kidding me?</li> 30 </ol> 31 </body> 32 </html>
通過上面的實現方式，經過博主的檢測，能夠在Chrome37、opera24、IE8~IE11、FireFox32、Safari5.1中得到很好的顯示效果。
現在就開始解析這個實現過程。首先我們看到了幾個即便是有着相對豐富的CSS經驗的開發者也未必見過的屬性：counter-reset 、counter-increment。這個兩個屬性主要是和CSS counters是一家。什么是css counters呢？在CSS2.1的規范中介紹了一種新技術，允許開發人員使用偽類:after、:before或者偽元素::after、::before給任何元素創建自動遞增計數器——類似於列表中的項目符號(list-style-type)。也就是說，通過這個屬性我們能夠自定義所有元素設置計數器，那么ol元素自然也就不在話下。這三個屬性必須是配合使用的， 說得更加准確一點是，要使用好CSS counters,就需要組合下面五個屬性：
counter-reset:
語法規則：counter-reset:[ <identifier> <integer>? ]+ | none | inherit 其中identifier用來定義計數器的名稱，這個名稱可以自定義。integer此值用來設置調用計算數器時起始值，默認值為0，在上面的例子中我們自定義了一個計數器reverse,起始值為4
counter-increment：
語法規則：counter-increment:[ <identifier> <integer>? ]+ | none | inherit 其中identifier計數器名稱，就調用counter-reset聲明的計數器的標識符，integer主要用來預設遞增的值，如果取值為負值時，表示遞減。默認值為1。在上面的例子中，我們調用了用counter-reset聲明的計數器reverse，並且預設遞減的值為1。
content：
content是和偽類:before、:after或者偽元素::before、::after配合在一起使用，主要功能用來生成內容。
counter：
counter()是一個函數，其主要配合content一起使用，counter()函數接受兩個參數，而且兩參數之間使用逗號(,)來分隔。第一個參數是counter-increment定義的屬性值<identifier>,用來告訴該文檔插入的計數器標識符名稱是什么。第二個是用來設置計數器的風格，有點類似於list-style-type。默認情況之下取值為十制。在上面的例子中，我們只是傳遞了一個參數reverse，那么計數器的風格就是十進制。
偽元素 :before等：
**:before**、**:after**或**::before**、**::after**：配合content用來生成計數器內容。
(為了更好地理解CSS counters，博主推薦大家好好看着這個：http://www.w3cplus.com/css3/css-counters.html，講解的非常清楚)
到這里，為什么上面的代碼能夠實現逆序排序ol的列表也就非常清楚了。不過，為了嚴謹，我們仍然需要注意兼容性的問題。通過查閱MDN，博主得到了瀏覽器對於counter-reset和counter-increment的支持情況：
那么我們能夠下一個結論：這種方法能夠在五大主流瀏覽器中得到比較好的支持，但是由於IE8還占有不小的市場份額，如果對於兼容性比較苛刻，需要謹慎考慮這種方法。
最后，就要介紹殺手級的方法了，其實這也不算一種新的方法，只不過兼容不支持reversed的瀏覽器。我們上面提到過直到IE11還是不支持reversed屬性，所以為了能夠使reversed屬性能夠在IE瀏覽器中使用，就需要采用Javascript來解決了。方法其實也是比較簡單的：
(1)判斷ol對象有沒有reversed屬性
(2)如果沒有reversed屬性，給ol元素的直接li節點設置value屬性。
你可以在你的頁面中引入下面的腳本，這樣在IE8~IE11中你也能夠使用reversed屬性了。這段代碼不是博主所寫，有興趣的可以在github上面查看源碼：https://github.com/impressivewebs/HTML5-Reverse-Ordered-Lists/blob/master/js/script.js
1 if (!('reversed' in document.createElement('ol'))) { 2 3 (function () { 4 'use strict'; 5 // Run the code on each ordered list with a "reversed" attribute. 6 var lists = document.getElementsByTagName('ol'), 7 length = lists.length, 8 i, 9 j, 10 child, 11 currChildren, 12 childrenLength, 13 start, 14 currCount, 15 val; 16 17 for (i = 0; i < length; i += 1) { 18 19 child = lists[i]; 20 21 if (child.getAttribute('reversed') !== null) { 22 23 currChildren = child.getElementsByTagName('li'); 24 childrenLength = currChildren.length; 25 start = child.getAttribute('start'); 26 27 // Check the existence of the start attribute and if it's 28 // a number. 29 if (start !== null && !isNaN(start)) { 30 currCount = start; 31 } else { 32 // Do this if the start attribute is not present. The first 33 // number is derived from the number of list items. 34 // (Ugh; Do we need double loops to get the correct count?) 35 36 currCount = 0; 37 38 for (j = 0; j < childrenLength; j += 1) { 39 40 if (currChildren[j].parentNode === child) { 41 currCount += 1; 42 } 43 44 } 45 } 46 // Go through each list item, adding the 'value' attribute 47 // plus currCount number then subtract one from currCount 48 // so we're ready for the next one. 49 for (j = 0; j < childrenLength; j += 1) { 50 51 if (currChildren[j].parentNode === child) { 52 // Per spec, if set, the value attribute should be used 53 // and renumbering started from there. 54 val = currChildren[j].getAttribute('value'); 55 56 if (val !== null && !isNaN(val)) { 57 currCount = val; 58 } 59 60 currChildren[j].setAttribute('value', currCount); 61 currCount -= 1; 62 } 63 } 64 } 65 } 66 67 }()); 68 69 }
那么，有關如何怎么實現元素ol的降序排序顯示，就大概講解到這里了。如果您希望轉載本文，請注明轉載地址：http://www.cnblogs.com/yuanzm/p/3995145.html
本文用到的參考連接如下：
1. MDN關於ol標簽的介紹：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
2. ol元素的相關屬性：type、start、value和reversed: http://www.zhangxinxu.com/wordpress/2012/03/css-html-ol-type-start-value-reversed/
3. 偽元素 :before: https://developer.mozilla.org/en-US/docs/Web/CSS/::before
4. CSS counter： http://www.w3cplus.com/css3/css-counters.html