一個有意思的方案：不借助後臺和 JS ，只用 CSS 讓一個列表編號倒序，你會怎麼作？

做者：Manuel Matuzovic
譯者：前端小智
來源：matuzo

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

我正在作一個項目，其中有一個倒序的列表。列表建立時間降序排序的，這裏我想在語義和視覺上都能體現出來(讓列表顯示對應的編號，編號越大表示是最新的)。網上作了一些研究，找到了一些有趣的解決辦法，有些很好，有些就不那麼好了。

最終結果相似以下:

1. C
2. B
3. A

接着，咱們來看看有哪些實現的方式。

HTML中的reversed 屬性

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

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

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

reversed 屬性除了 IE 大多數的瀏覽器都支持，若是你只想要解決方法，用這種就夠了。

若是你好奇還有哪些實現方式，請繼續閱讀。

HTML中的value屬性

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

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

這種方式雖然比較冗長，但咱們對列表也有更多控制權，好比，咱們還能夠這樣操做：

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

最好仍是不要這樣作，由於跳過數字可能會讓用戶感到困惑。

CSS 自定義的 counter()

第三種方式就是使用CSS的 counter 計算器， 要倒序計數器的順序，咱們有兩件事要作：將計數器重置爲非0的值，並以負數遞增計數器。

<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;
}

若是咱們不知道確切的列表數量，則能夠將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或相似的技術來反轉 CSS 中列表順序。咱們不該該這樣作，由於它看起來是正確的，但 DOM 的順序保持不變。在 CSS 中改變順序對DOM順序沒有影響。

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

ol {
  display: flex;
  flex-direction: column-reverse;
}

頁面上看好像是咱們想要的結果，但你按 F12 打開調試模式，檢查該 DOM 的順序，你會我發現 DOM 的順序是 「ABC」而不是「CBA」的順序渲染列表。 另外，若是咱們複製並粘貼列表，瀏覽器可能會以其原始順序「ABC」複製它。

另外我還在 StackOverflow 上找到的另外一個很是有創意的解決方案。其結果與Flexbox的解決方案相似，但也有更多的缺點(例如，它會干擾滾動)。

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

ol {
  transform: rotate(180deg);
}

ol > li {
  transform: rotate(-180deg);
}

固然這估計在絕望中沒辦法了，纔會這麼作，咱們最好仍是不要這樣搞。

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

人才們的 【三連】 就是小智不斷分享的最大動力，若是本篇博客有任何錯誤和建議，歡迎人才們留言，最後，謝謝你們的觀看。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://dzone.com/articles/ht...

---

交流

文章每週持續更新，能夠微信搜索 【大遷世界 】 第一時間閱讀，回覆 【福利】 有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。