下载掌阅APP，畅读海量书库
立即打开
我们可能使用过如下所示的CSS代码来改变<ol>元素的序号类型，比如重置默认的阿拉伯数字序号为大写英文字母。
此时，下面这段HTML代码的呈现效果就会如图2-14所示。
图2-14 有序列表项目符号是大写字母
那么请问，如果我希望有序列表的序号不是从1或者A开始的，而是从3或者C开始的，该如何实现呢？或者说你有办法让有序列表的序号倒序排列吗？
要回答这两个问题，就不得不说一说在众多列表元素中，只有<ol>元素才支持的几个属性了。
1.type属性
<ol>列表支持type属性，可以用来定义有序列表的类型，跟CSS中的list-style-type属性值有一一对应的关系，详见表2-10。
表2-10 <ol>type属性和list-style-type属性的对应关系
当HTML中的type和CSS中的list-style-type同时出现的时候，list-style-type会优先于type，即显示list-style-type对应值内容。如果CSS中未设置具体的list-style-type值，自然以type属性的设置为准。
有人可能会问，既然有了CSS的list-style-type属性，那么<ol>元素上的type属性是不是就无用武之地呢？
其实不然，type属性相比list-style-type有两个不太突出的优点：
· 更容易记忆，例如同样是设置列表序号为大写字母，type属性设置为A就好，而list-style-type的值则是upper-alpha，显然后者更难记忆。
· 语义化，有助于机器识别准确的序号类型，尤其是当多个有序列表相互嵌套的时候。
因此，我的建议是，如果可以，优先使用HTML type属性设置有序符号的类型。
2.start和value属性
start和value属性可以指定有序列表的起始序号，其中，start属性是用在<ol>元素上的，而value属性是用在<li>元素上的，使用示意参见如下代码。
上面两种写法都可以渲染出如图2-15所示的列表效果。
图2-15 有序列表符号从字母C开始的效果
如果同时设置start和value属性，则以value属性为准。
另外，如果是字母排序，且序号范围超过了26，则会在前面叠加字母作为前缀，例如：
此时的效果如图2-16所示，可以看到，所有字母的前面都有一个共同的字母A。
图2-16 有序列表数量超过26之后的字母排序效果
3.reversed降序
严格来讲，reversed是个新属性，它出现的时间和浏览器全面支持Flex布局的时期一致，因此，IE浏览器并不支持它。
该属性可以在不改变列表元素布局的情况下，让有序列表的序号按照倒序呈现。例如：
此时，列表的序号就会从3开始，依次递减，如图2-17所示。
图2-17 有序列表倒序效果
基本上这种有序列表的倒序排列使用的都是这里的reversed属性，简单快捷，尽量不要使用CSS在布局层面强制倒序，也就是尽量不要使用下面的CSS代码，除非在有序符号使用CSS计数器实现的场景。
以上几个属性就是<ol>元素才有的HTML属性，每个属性都有其独到的作用，遇到符合的场景一定要优先使用，而不是借助CSS或者JavaScript代码，因为可以收获很多看不见的好处。举个非常简单的例子，在复制页面内容并粘贴到富文本编辑器的场景中，如果有序列表的起始值或者反序都是使用CSS代码模拟的，那么，当粘贴到富文本编辑器中的时候，这些信息就会丢失，而如果使用HTML属性，这些信息都会被保留到富文本编辑器中。