[[336026]]

我正在做一個項目，其中有一個倒序的列表。列表創(chuàng)建時間降序排序的，這里我想在語義和視覺上都能體現(xiàn)出來(讓列表顯示對應(yīng)的編號，編號越大表示是最新的)。網(wǎng)上做了一些研究，找到了一些有趣的解決辦法，有些很好，有些就不那么好了。

最終結(jié)果類似如下:

3.C

4.B

5.A

接著，我們來看看有哪些實(shí)現(xiàn)的方式。

HTML中的reversed 屬性

簡單，最直接的解決方案是HTML中的reversed屬性。

<ol reversed> 
  <li>C</li> 
  <li>B</li> 
  <li>A</li> 
</ol> 

reversed 屬性是一個布爾屬性，reversed 屬性規(guī)定列表順序為降序 (9, 8, 7...)，而不是升序 (1, 2, 3...)。

reversed 屬性除了 IE 大多數(shù)的瀏覽器都支持，如果你只想要解決方法，用這種就夠了。

如果你好奇還有哪些實(shí)現(xiàn)方式，請繼續(xù)閱讀。

HTML中的value屬性

另一種方法就是使用 value 屬性：

<ol> 
  <li value="3">C</li> 
  <li value="2">B</li> 
  <li value="1">A</li> 
</ol> 

這種方式雖然比較冗長，但我們對列表也有更多控制權(quán)，比如，我們還可以這樣操作：

<ol> 
  <li value="6">C</li> 
  <li value="4">B</li> 
  <li value="2">A</li> 
</ol> 

最好還是不要這樣做，因為跳過數(shù)字可能會讓用戶感到困惑。

CSS 自定義的 counter()

第三種方式就是使用CSS的 counter 計算器， 要倒序計數(shù)器的順序，我們有兩件事要做：將計數(shù)器重置為非0的值，并以負(fù)數(shù)遞增計數(shù)器。

<ol> 
  <li>C</li> 
  <li>B</li> 
  <li>A</li> 
</ol> 
ol { 
  counter-reset: my-custom-counter 4; 
  list-style: none; 
} 
 
ol li { 
  counter-increment: my-custom-counter -1; 
} 
 
ol li::before { 
  content: counter(my-custom-counter) ". "; 
  color: #f23c50; 
  font-size: 2.5rem; 
  font-weight: bold; 
} 

如果我們不知道確切的列表數(shù)量，則可以將counter-reset屬性移到HTML中：

<ol style="counter-reset: my-custom-counter {{ items.length + 1 }}"> 
  <li>C</li> 
  <li>B</li> 
  <li>A</li> 
</ol> 
ol { 
  list-style: none; 
} 
 
ol li { 
  counter-increment: my-custom-counter -1; 
} 
 
ol li::before { 
  content: counter(my-custom-counter) ". " 
} 

一些文章建議使用Flexbox或類似的技術(shù)來反轉(zhuǎn) CSS 中列表順序。我們不應(yīng)該這樣做，因為它看起來是正確的，但 DOM 的順序保持不變。在 CSS 中改變順序?qū)OM順序沒有影響。

<ol> 
  <li>A</li> 
  <li>B</li> 
  <li>C</li> 
</ol> 
ol { 
  display: flex; 
  flex-direction: column-reverse; 
} 

頁面上看好像是我們想要的結(jié)果，但你按 F12 打開調(diào)試模式，檢查該 DOM 的順序，你會我發(fā)現(xiàn) DOM 的順序是 **“ABC”而不是“CBA”**的順序渲染列表。另外，如果我們復(fù)制并粘貼列表，瀏覽器可能會以其原始順序“ABC”復(fù)制它。

另外我還在 StackOverflow 上找到的另一個非常有創(chuàng)意的解決方案。其結(jié)果與Flexbox的解決方案類似，但也有更多的缺點(diǎn)(例如，它會干擾滾動)。

<ol> 
  <li>A</li> 
  <li>B</li> 
  <li>C</li> 
</ol> 
ol { 
  transform: rotate(180deg); 
} 
 
ol > li { 
  transform: rotate(-180deg); 
} 

當(dāng)然這估計在絕望中沒辦法了，才會這么做，我們最好還是不要這樣搞。

本期的分享就到這了，感謝的大家的觀看，我們下期分享在見過。

作者：Manuel Matuzovic 譯者：前端小智 來源：matuzo 原文：https://dzone.com/articles/html-5-reverse-ordered-lists

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。