CSS列表逆序
要使列表逆序的话,大多数人包括我一半都会选择在ol标签里使用reversed属性
<ol reversed>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
<li>sixth</li>
</ol>
效果展示:
未使用reversed:使用reversed后:
但是,reversed有很多的限制,比如,chrome,firebox及safari支持reversed这个逻辑属性,而internet explore和opera不支持该属性,所以在IE及opera里面不能直接在html的使用reversed这个逻辑属性,这样的话,就只能在CSS里面下功夫了……
ol {
list-style:none;
counter-reset:line 7;
}
ol > li:before {
counter-increment: line -1;
content: counter(line)".";
}
接下来微微解释一下~
counter-reset:line 7;
line处定义的是一个计数器,这个名字可以自己改动,之后的7是该计数器的起始值,起始值在没有设定的情况下默认为0。由于当前我们对同一元素重置和使用时先递增的,所以要设置为7才能保证递减之后第一个是6。
ol > li:before
这里涉及两个知识点:子元素选择器还有伪元素,子元素选择器只能选择作为某元素子元素的元素,CSS 伪元素用于向某些选择器设置特殊效果。详情得参考知识点~
counter-increment:line -1;
调用之前设置的计数器line,然后赋值,当赋值为负数(-1)时,该计数器递减处理;相反,当赋值为正,则递增。默认值为1。
content:counter(line)".";
counter()是一个函数,配合content使用,counter()接受两个参数,将两个参数用"."分隔开。
正在做网页初级阶段,如果有误请各位大神帮忙指点~
CSS列表逆序的更多相关文章
- Python中列表逆序
1.list.reverse() 该方法是直接在原来的列表里面将元素进行逆序排列,不需要创建新的副本用于存储结果. 这种方式,有好处也有坏处.好处是节省内存使用,因为我们不需要重新申请空间来保存最后的 ...
- python列表逆序三种方法
栗子: # 题目:将一个数组逆序输出. # # 程序分析:用第一个与最后一个交换. import random list =[random.randint(0,100) for _ in range( ...
- python列表和字符串的三种逆序遍历方式
python列表和字符串的三种逆序遍历方式 列表的逆序遍历 a = [1,3,6,8,9] print("通过下标逆序遍历1:") for i in a[::-1]: print( ...
- 迭代器iterator(三):Listlterator遍历arraylist,并用逆序输出结果
迭代器(iterator) 是一种对象,它能够用来遍历标准模板库容器中的部分或全部元素,每个迭代器对象代表容器中的确定的地址.迭代器修改了常规指针的接口,所谓迭代器是一种概 念上的抽象:那些行为上像迭 ...
- Java使用ListIterator逆序ArrayList
对于列表而言,除了Iterator,还提供了一个功能更加强大的ListIterator.它可以实现逆序遍历列表中的元素.本示例将使用其逆序遍历ArrayList. 思路分析:要逆序遍历某个列表,首先要 ...
- 链表逆序---python
class ListNode: Value = '' # 节点要储存的值,因为Python是弱类型,因此无需传入泛型 Next = None # 下一个节点,初始化时为空值 def __init__( ...
- Reverse Linked List II 单向链表逆序(部分逆序)
0 问题描述 原题点击这里. 将单向链表第m个位置到第n个位置倒序连接.例如, 原链表:1->2->3->4->5, m=2, n =4 新链表:1->4->3-& ...
- HTML 学习笔记 CSS(列表)
CSS列表属性允许你放置 改变列表项标志 或者将图像作为列表项标志. CSS列表 从某中意义上讲 不是描述性的文本的任何内容都可以认为是列表.人口普查.太阳系.家谱.参观菜单,甚至你的所有朋友都可以表 ...
- hdu.1043.Eight (打表 || 双广 + 奇偶逆序)
Eight Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
随机推荐
- js词法分析
JavaScript的高级知识---词法分析 词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 函数在运行的瞬间, ...
- Python之Web框架
Python之Web框架: 一. Web框架的本质: 对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env pyth ...
- cron 任务
相关文件 /etc/crontab /etc/cron.deny 设置哪个用户有权限运行 cron 任务 /var/spool/cron/root /var/spool/cron/user /var/ ...
- maven学习(上)- 基本入门用法
一.下载及安装 1.1 下载maven 3.1.1 先到官网http://maven.apache.org/download.cgi 下载最新版本(目前是3.1.1 ),下载完成后,解压到某个目录(本 ...
- css写出0.5px边框(一)
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...
- iOS之中途修改类名
中途修改类名 在开发过程中,可能感觉之前设置的类名不够代表性,或者发现名字拼写错误等等诸如此类的原因,需要修改类名,不懂技巧的话简直不敢改,现在这里就记录下该类名的方法. 具体步骤如下: .h文件里选 ...
- WPF 如何引入外部样式
当我们给一些控件设置相同的属性的时候,这时候,我们可以把这些属性写到一个Style里面. 而其他页面也有类似的控件也需要使用这个Style,这时候就需要把这个Style放在一个共通的文件里,然后引入这 ...
- 用极简方式实现新浪新版本特性展示效果--view的图片轮播
在发布版本的时候,大多数软件会在第一次使用新版本时候弹出视图用几张图片给用户做一个新版本特性介绍,最简单如下图新浪的版本特性介绍 由于图片是全屏展示且是左右滑动,大多数情况开发者会选择使用scroll ...
- UML大战需求分析——阅读笔记06
状态机图和活动图在样子比较相似,但状态机图是用来为对象的状态及造成状态改变的事件建模.我们大二学习UML统一建模语言状态机图模块时了解到,UML的状态机图主要用于建立对象类或对象的动态行为模型,描述系 ...
- webview页面缩放 & 自适应
0.webview页面自适应: // 1.LayoutAlgorithm.NARROW_COLUMNS : 适应内容大小// 2.LayoutAlgorithm.SINGLE_COLUMN:适应屏幕, ...