css倒序循环,不借助后台和 JS ,只用 CSS 让一个列表编号倒序
我正在做一个项目,其中有一个倒序的列表。列表创建时间降序排序的,这里我想在语义和视觉上都能体现出来(让列表显示对应的编号,编号越大表示是最新的)。网上做了一些研究,找到了一些有趣的解决办法,有些很好,有些就不那么好了。
最终结果类似如下:
接着,我们来看看有哪些实现的方式。
HTML中的 reversed 属性
简单,最直接的解决方案是HTML中的reversed属性。
- C
- B
- A
效果如下:
reversed 属性是一个布尔属性,reversed 属性规定列表顺序为降序 (9, 8, 7…),而不是升序 (1, 2, 3…)。
reversed 属性除了 IE 大多数的浏览器都支持,如果你只想要解决方法,用这种就够了。
如果你好奇还有哪些实现方式,请继续阅读。
HTML中的value属性
另一种方法就是使用 value 属性:
- C
- B
- A
效果如下:
这种方式虽然比较冗长,但我们对列表也有更多控制权,比如,我们还可以这样操作:
- C
- B
- A
效果如下:
最好还是不要这样做,因为跳过数字可能会让用户感到困惑。
CSS 自定义的 counter()
第三种方式就是使用CSS的 counter 计算器, 要倒序计数器的顺序,我们有两件事要做:将计数器重置为非0的值,并以负数递增计数器。
- C
- B
- A
CSS代码:
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中:
- C
- B
- A
CSS代码:
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顺序没有影响。
- A
- B
- C
CSS代码:
ol {
display: flex;
flex-direction: column-reverse;
}
效果如下:
页面上看好像是我们想要的结果,但你按 F12 打开调试模式,检查该 DOM 的顺序,你会我发现 DOM 的顺序是 “ABC”而不是“CBA”的顺序渲染列表。 另外,如果我们复制并粘贴列表,浏览器可能会以其原始顺序“ABC”复制它。
另外我还在 StackOverflow 上找到的另一个非常有创意的解决方案。其结果与Flexbox的解决方案类似,但也有更多的缺点(例如,它会干扰滚动)。
- A
- B
- C
CSS代码:
ol {
transform: rotate(180deg);
}
ol > li {
transform: rotate(-180deg);
}
当然这估计在绝望中没办法了,才会这么做,我们最好还是不要这样搞。
结语
以上就是今天我为大家分享的不借助后台和 JS ,只用 CSS 让一个列表编号实现倒序效果,如果大家对本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。
css倒序循环,不借助后台和 JS ,只用 CSS 让一个列表编号倒序相关推荐
- [html] 举例说明只用html和css如何使得一个列表编号倒序?
[html] 举例说明只用html和css如何使得一个列表编号倒序? <!DOCTYPE html> <html> <body> <style> ol{ ...
- js和css被屏蔽了,拦截器 Filter ,js、css、image等静态资源不被拦截解决方案
方案一: web.xml配置文件拦截范围缩小 ,没有必要 /*的配置拦截项目下所有资源. Login com.ssm.crm.filter.LoginFilter Login /* 修改如下: Log ...
- 如何压缩css代码,在开发中怎么压缩js和css?有哪些办法?
在开发的时候我们会选择将自己的代码进行压缩和打包,那么对于"在开发中怎么压缩js和css?有哪些办法?"这个问题小编为带来了一些干货. 对于压缩 js 与 css,我们一般是使用在 ...
- html css好看的提示框,div对话框,js+div+css实现好看的提示框效果(转)
div对话框,js+div+css实现好看的提示框效果(转) (2012-02-18 20:46:23) 标签: html div css 杂谈 提示窗都越来越人性化了,呵呵,有的时候老板就和你要那么 ...
- JavaScript使用localStorage缓存Js和css文件
对于WebApp来说,将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间.特别是当移端信号不好高延迟时优化效果还是很显见的 下面的代 ...
- 优雅的使用Js或CSS处理文本的截断与展示
之前遇见一个问题,就是处理文本截断,然后可以手动切换文本是全展示和手动展示,因为这个问题比较常见,而且其实现方式有多种,于是决定总结一下,与读者分享. 前言 首先,我们看这样一个场景: 展开更多 其h ...
- js和css压缩工具
封装的.net命令行的js,css含有自动修复功能的工具: js或css压缩,如果原文件是当前路径把home.exe.xml配置改成:<basePath>./</basePath&g ...
- JS使用localStorage缓存Js和css文件
代码下载: http://download.csdn.net/download/qq_29132907/10261798 目录结构 将jquery和公共样式缓存到localStorage,可以减少Ht ...
- Vue.js使用CSS美化
网页的美化主要靠CSS.Vue.js也可以借助CSS实现更好的效果. 一.什么是CSS 这里就不介绍了.对开发者而言,所有的样式如果都需要手写是非常繁琐的,而且难度也非常的高,这时就该用到现有的开源U ...
最新文章
- centos7下的glusterfs的安装与使用
- Java 第一个Java程序
- 中石油训练赛 - 手机号码(简单分块+思维)
- python初学者代码示例_python基础示例
- 计算机一级发邮件发送多个抄送,计算机一级考试IE题和收发邮件模拟题.docx
- (转)Web Services使用多态(XmlInclude) ,支持自定义类型
- 漫步最优化三十八——非二次函数最小化
- python鼠标右键检测按钮_如何检测右键单击+左键单击
- mac 卸载 node并重新安装
- python支持向量机 股票_小蛇学python(4)利用SVM预测股票涨跌
- php去除img,PHP如何去除IMG标签?_后端开发
- Linux Socket 网络编程
- oracle vm virtualbox安装xp系统,怎么使用VirtualBOX安装XP系统?VirtualBOX安装WinXp系统图文教程...
- 【STM32】 STM32单片机IO引脚配置方式
- 莱维特LEWITT声卡驱动安装设置方法
- celery redis mysql_GitHub - FJUT/gxgk-wechat-server: 校园微信公众号后端,使用 Python、Flask、Redis、MySQL、Celery...
- 居然有人能把5G解释的这么清楚
- android html字体大小,android Html.fromHtml font 标签支持设置字体大小和颜色
- 微信支付小程序支付和APP支付
- Android12之fatal error: ‘processinfo/ProcessInfoService.h‘ file not found
热门文章
- python获取系统参数_python 常用系统参数
- python 打开网页获取cookies_python 携带cookie获取页面内容
- 小米bl未解锁变砖了如何刷机_如何安装MIUI 10
- linux修改非root用户密码永不过期
- python颜色相关系数_python相关系数 - osc_w6qmyr6s的个人空间 - OSCHINA - 中文开源技术交流社区...
- python数据分析模块包括_数据开发必会 | Python数据分析模块
- java实验6 词频统计_java实训一——词频统计
- oracle求数据关联度,关于数据挖掘关联规则的Oracle实现
- JAVA读锁不使用效果一样_Java使用读写锁替代同步锁
- ASP.NET MVC Controller Overview摘录