我正在做一个项目, 其中有一个倒序的列表. 列表创建时间降序排序的, 这里我想在语义和视觉上都能体现出来(让列表显示对应的编号, 编号越大表示是最新的). 网上做了一些研究, 找到了一些有趣的解决办法, 有些很好, 有些就不那么好了.
最终结果类似如下:
C
B
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" 复制它.
另外我还在 Stack Overflow 上找到的另一个非常有创意的解决方案. 其结果与 Flexbox 的解决方案类似, 但也有更多的缺点(例如, 它会干扰滚动).
- <ol>
- <li>A</li>
- <li>B</li>
- <li>C</li>
- </ol>
- ol {
- transform: rotate(180deg);
- }
- ol> li {
- transform: rotate(-180deg);
- }
当然这估计在绝望中没办法了, 才会这么做, 我们最好还是不要这样搞.
本期的分享就到这了, 感谢的大家的观看, 我们下期分享在见过.
来源: http://www.css88.com/web/html/20078.html