您的位置：首页 > 产品设计 > UI/UE

ol元素及相关属性:type, start, value, 和reversed

2015-11-17 12:15 567 查看

一、掘墓

很久很久以前，有一个美丽的公主，她有一头秀丽的长发……（人群中突然飞来一个鼠标，正中我额头，几个星星迸出，眼前一片漆黑，迷迷糊糊中隐隐听到：MB, 正经点，我们过来不是听童话故事滴！）

30min后，华佗给了个桃，半血复活，老实了~~

很久很久以前，我写过一篇关于列表的文章 —— “HTML CSS列表元素ul,ol,dl的研究与应用”，算是个中长篇，只可惜因为年代久远，被时间埋啊埋的，都快变成地下古董，不为人所知了。

“虽然文章已作古，此时亦可松松土”。有兴趣的你可以看看，其中也有关于ol列表的介绍，只是呢，“官人虽被小姐提，只是碎语本无意”。因此，这里有针对性的详细介绍还是很有必要的，因为根据自己的经验，一篇文章内容多而杂的时候，很多好的内容会湮没在随波中。

二、前世今生

type

start

value

,
和

reversed

每个的生世是不一样滴。

reversed

属于新兴人类，随着HTML5来到这个世界的，顾名思意表“反转”。而

start

和

type

都是在HTML4中被文革掉的，但是，现在，它们又回来了。//zxx:为什么又回来呢？嘛，谁知道呢~~

我们都知道，CSS是负责表现，而且推荐各类表现都使用CSS完成。在HTML 4.01中，

type

属性无奈地被

list-style-type

替代了（本是同根生，相煎何太急），而

start

和

value

属性被无情地抛弃了，只有在使用content内容生成序列（掘墓吧，见part
4）的时候才发出一点微弱的气息。

三、type属性

对于

ol

列表，HTML中的

type

属性跟CSS中的

list-style-type

实则一路货色。如下对应表：
type属性值及对应的列表计数类型


<ol type=""> 值	等同于 list-style-type
type="1"	decimal (默认样式)
type="a"	lower-alpha
type="A"	upper-alpha
type="i"	lower-roman
type="I"	upper-roman

当HTML中的

type

和CSS中的

list-style-type

同时出现的时候，

list-style-type

会优先与

type

，即显示

list-style-type

对应值内容。如果CSS中未设置具体

list-style-type

值，自然

type

称大王。

五、start和value属性

这两个属性举个板栗就知道什么意思了。

您可以狠狠地点击这里：ol列表start属性测试demo ol列表value属性测试demo

这两个demo页面的效果是一模一样滴，如下截图(IE7献丑)：

想对应的HTML如下：

<ol type="I" start="5">
<li>SHUFFLE!/三界恋曲</li>
<li>扑杀天使</li>
<li>零之使魔</li>
<li>不要撒娇哦/极乐天师/纯情和尚俏尼姑</li>
<li>to love/出包王女</li>
</ol>

<ol type="I">
<li value="5">SHUFFLE!/三界恋曲</li>
<li>扑杀天使</li>
<li>零之使魔</li>
<li>不要撒娇哦/极乐天师/纯情和尚俏尼姑</li>
<li>to love/出包王女</li>
</ol>

暗香非轻云，亦可月黄昏。

六、reverse降序

如下示例代码：

<ol reversed>
<li>2012-03-06是星期几？</li>
<li>你有几只眼睛？</li>
<li>最小的自然数是？</li>
</ol>

支持的浏览器应该是下面这幅模样：

对于不支持的浏览器（例如Chrome 16）：

可见，目前浏览器对

ol

元素reversed属性的支持还是有些弱滴（下一章节的兼容性表可见）。

三月时节雨绵绵，春意阑珊。

您可以狠狠地地点击这里：ol列表元素reverse属性demo

虽然写本文的时候，鲜有浏览器上面的demo出现想要的效果，但是，浏览器发展是迅速滴及时滴，相信在本文掩入黄土之前此demo可见天日。