我正在做一個(gè)項(xiàng)目，其中有一個(gè)倒序的列表。列表創(chuàng)建時(shí)間降序排序的，這里我想在語(yǔ)義和視覺上都能體現(xiàn)出來(lái)(讓列表顯示對(duì)應(yīng)的編號(hào)，編號(hào)越大表示是最新的)。網(wǎng)上做了一些研究，找到了一些有趣的解決辦法，有些很好，有些就不那么好了。
最終結(jié)果類似如下:
3.C
4.B
5.A
接著，我們來(lái)看看有哪些實(shí)現(xiàn)的方式。
HTML中的reversed 屬性
簡(jiǎn)單，最直接的解決方案是HTML中的reversed屬性。
-
-
- C
-
- B
-
- A
reversed 屬性是一個(gè)布爾屬性，reversed 屬性規(guī)定列表順序?yàn)榻敌?(9, 8, 7...)，而不是升序 (1, 2, 3...)。
reversed 屬性除了 IE 大多數(shù)的瀏覽器都支持，如果你只想要解決方法，用這種就夠了。
如果你好奇還有哪些實(shí)現(xiàn)方式，請(qǐng)繼續(xù)閱讀。
HTML中的value屬性
另一種方法就是使用 value 屬性：
- C
- B
- A
這種方式雖然比較冗長(zhǎng)，但我們對(duì)列表也有更多控制權(quán)，比如，我們還可以這樣操作：
- C
- B
- A
最好還是不要這樣做，因?yàn)樘^數(shù)字可能會(huì)讓用戶感到困惑。
CSS 自定義的 counter()
第三種方式就是使用CSS的 counter 計(jì)算器， 要倒序計(jì)數(shù)器的順序，我們有兩件事要做：將計(jì)數(shù)器重置為非0的值，并以負(fù)數(shù)遞增計(jì)數(shù)器。
-
- C
-
- B
-
- A
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中：
-
-
- C
-
- B
-
- A
ol {
list-style: none;
}
ol li {
counter-increment: my-custom-counter -1;
}
ol li::before {
content: counter(my-custom-counter) ". "
}
一些文章建議使用Flexbox或類似的技術(shù)來(lái)反轉(zhuǎn) CSS 中列表順序。我們不應(yīng)該這樣做，因?yàn)樗雌饋?lái)是正確的，但 DOM 的順序保持不變。在 CSS 中改變順序?qū)OM順序沒有影響。
-
- A
-
- B
-
- C
ol {
display: flex;
flex-direction: column-reverse;
}
頁(yè)面上看好像是我們想要的結(jié)果，但你按 F12 打開調(diào)試模式，檢查該 DOM 的順序，你會(huì)我發(fā)現(xiàn) DOM 的順序是 **“ABC”而不是“CBA”**的順序渲染列表。另外，如果我們復(fù)制并粘貼列表，瀏覽器可能會(huì)以其原始順序“ABC”復(fù)制它。
另外我還在 StackOverflow 上找到的另一個(gè)非常有創(chuàng)意的解決方案。其結(jié)果與Flexbox的解決方案類似，但也有更多的缺點(diǎn)(例如，它會(huì)干擾滾動(dòng))。
-
- A
-
- B
-
- C
ol {
transform: rotate(180deg);
}
ol > li {
transform: rotate(-180deg);
}
當(dāng)然這估計(jì)在絕望中沒辦法了，才會(huì)這么做，我們最好還是不要這樣搞。
本期的分享就到這了，感謝的大家的觀看，我們下期分享在見過。
作者：Manuel Matuzovic 譯者：前端小智 來(lái)源：matuzo 原文：https://dzone.com/articles/html-5-reverse-ordered-lists
本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。
分享標(biāo)題：一個(gè)有意思的方案：不借助后臺(tái)和JS，只用CSS讓一個(gè)列表編號(hào)倒序，你會(huì)怎么做？
文章出自：
http://uogjgqi.cn/article/cdjisho.html
