html字母逆序输出代码,HTML/CSS 实现逆序列表 (列表编号倒序)

HTML/CSS 实现逆序列表 (列表编号倒序)

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

最终结果类似如下:

C

B

A

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

html 中的 reversed 属性

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

CBA

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

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

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

HTML 中的 value 属性

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

C

B

A

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

C

B

A

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

CSS 自定义的 counter()

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

1. C
2. B
3. 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;

}

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

CBA

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 顺序没有影响.

1. A
2. B
3. C

ol {

display: flex;

flex-direction: column-reverse;

}

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

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

1. A
2. B
3. C

ol {

transform: rotate(180deg);

}

ol> li {

transform: rotate(-180deg);

}

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

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

来源: http://www.css88.com/web/html/20078.html