一个有意思的方案:不借助后台和 JS ,只用 CSS 让一个列表编号倒序,你会怎么做?

开发 项目管理
我正在做一个项目,其中有一个倒序的列表。列表创建时间降序排序的,这里我想在语义和视觉上都能体现出来(让列表显示对应的编号,编号越大表示是最新的)。网上做了一些研究,找到了一些有趣的解决办法,有些很好,有些就不那么好了。

 [[336026]]

我正在做一个项目,其中有一个倒序的列表。列表创建时间降序排序的,这里我想在语义和视觉上都能体现出来(让列表显示对应的编号,编号越大表示是最新的)。网上做了一些研究,找到了一些有趣的解决办法,有些很好,有些就不那么好了。

最终结果类似如下:

3.C

4.B

5.A

接着,我们来看看有哪些实现的方式。

HTML中的reversed 属性

简单,最直接的解决方案是HTML中的reversed属性。

  1. <ol reversed> 
  2.   <li>C</li> 
  3.   <li>B</li> 
  4.   <li>A</li> 
  5. </ol> 

 

reversed 属性是一个布尔属性,reversed 属性规定列表顺序为降序 (9, 8, 7...),而不是升序 (1, 2, 3...)。

reversed 属性除了 IE 大多数的浏览器都支持,如果你只想要解决方法,用这种就够了。

如果你好奇还有哪些实现方式,请继续阅读。

HTML中的value属性

另一种方法就是使用 value 属性:

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

 

这种方式虽然比较冗长,但我们对列表也有更多控制权,比如,我们还可以这样操作:

  1. <ol> 
  2.   <li value="6">C</li> 
  3.   <li value="4">B</li> 
  4.   <li value="2">A</li> 
  5. </ol> 

 

最好还是不要这样做,因为跳过数字可能会让用户感到困惑。

CSS 自定义的 counter()

第三种方式就是使用CSS的 counter 计算器, 要倒序计数器的顺序,我们有两件事要做:将计数器重置为非0的值,并以负数递增计数器。

  1. <ol> 
  2.   <li>C</li> 
  3.   <li>B</li> 
  4.   <li>A</li> 
  5. </ol> 
  6. ol { 
  7.   counter-reset: my-custom-counter 4; 
  8.   list-style: none; 
  9.  
  10. ol li { 
  11.   counter-increment: my-custom-counter -1; 
  12.  
  13. ol li::before { 
  14.   content: counter(my-custom-counter) ". "
  15.   color: #f23c50; 
  16.   font-size: 2.5rem; 
  17.   font-weight: bold; 

 

如果我们不知道确切的列表数量,则可以将counter-reset属性移到HTML中:

  1. <ol style="counter-reset: my-custom-counter {{ items.length + 1 }}"
  2.   <li>C</li> 
  3.   <li>B</li> 
  4.   <li>A</li> 
  5. </ol> 
  6. ol { 
  7.   list-style: none; 
  8.  
  9. ol li { 
  10.   counter-increment: my-custom-counter -1; 
  11.  
  12. ol li::before { 
  13.   content: counter(my-custom-counter) ". " 

一些文章建议使用Flexbox或类似的技术来反转 CSS 中列表顺序。我们不应该这样做,因为它看起来是正确的,但 DOM 的顺序保持不变。在 CSS 中改变顺序对DOM顺序没有影响。

  1. <ol> 
  2.   <li>A</li> 
  3.   <li>B</li> 
  4.   <li>C</li> 
  5. </ol> 
  6. ol { 
  7.   display: flex; 
  8.   flex-direction: column-reverse; 

 

页面上看好像是我们想要的结果,但你按 F12 打开调试模式,检查该 DOM 的顺序,你会我发现 DOM 的顺序是 **“ABC”而不是“CBA”**的顺序渲染列表。另外,如果我们复制并粘贴列表,浏览器可能会以其原始顺序“ABC”复制它。

另外我还在 StackOverflow 上找到的另一个非常有创意的解决方案。其结果与Flexbox的解决方案类似,但也有更多的缺点(例如,它会干扰滚动)。

  1. <ol> 
  2.   <li>A</li> 
  3.   <li>B</li> 
  4.   <li>C</li> 
  5. </ol> 
  6. ol { 
  7.   transform: rotate(180deg); 
  8.  
  9. ol > li { 
  10.   transform: rotate(-180deg); 

当然这估计在绝望中没办法了,才会这么做,我们最好还是不要这样搞。

本期的分享就到这了,感谢的大家的观看,我们下期分享在见过。

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

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2023-05-15 09:16:18

CSSCSS Mask

2020-12-12 13:50:16

云开发

2021-01-27 13:54:05

开发云原生工具

2018-06-24 16:39:28

Tomcat异常线程

2024-05-20 01:10:00

Promise变量

2024-08-28 08:38:51

2024-03-18 08:14:07

SpringDAOAppConfig

2009-08-26 17:53:31

C# DropDown

2022-03-21 10:21:50

jQuery代码模式

2015-03-12 10:46:30

代码代码犯罪

2021-01-14 05:23:32

高并发消息中间件

2021-04-26 07:53:06

DOM前端框架

2022-05-13 08:12:00

JMeter测试计划

2022-05-20 07:36:02

LiveTerm工具

2020-03-10 14:59:16

oracle数据库监听异常

2023-07-17 09:19:20

CSSCSS 渐变

2017-12-07 15:05:50

全球互联网创新峰会

2023-08-27 21:25:20

用户画像数据数据分析

2021-06-10 08:15:49

CSS 文字动画技巧

2023-11-21 21:59:50

c++接口
点赞
收藏

51CTO技术栈公众号