首先介绍一下什么是ol元素。这里直接引用MDN里面的定义:The HTML <ol> Element (or HTML Ordered List Element) represents an ordered list of items.也就是说这个元素的包含的li元素是带有数字序号的。为了更好阐述下面介绍的几种方法,我们首先写出一个有序列表:

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ol reversed</title>
</head>
<body>
<ol>
<li>item1: I'm a boy</li>
<li>item2: I'm a boy too</li>
<li>item3: Are you kidding me?</li>
</ol>
</body>
</html>

  看到的效果就是:

  到这里我们就发现一个神圣的有序列表产生了。

  接下来就是介绍怎么实现元素ol的逆向排序显示了。实现的方法是很多的,在这里介绍三种方法,如果您有更好的方法,欢迎在下面的评论中提出。这里提到的三种方法分别使用HTML、CSS和JavaScript实现,样样都有,随你挑。

  首先介绍一下HTML的实现方法,这个办法应该是最简单有效的,因为在HTML5中已经为这个标签添加了一个属性:reversed,方法也很简单,只需要在ol元素的起始标签中添加一个 reversed属性,就能非常容易实现元素ol的降序排序显示,我们来看一看效果:

 <ol reversed>
<li>item1: I'm a boy</li>
<li>item2: I'm a boy too</li>
<li>item3: Are you kidding me?</li>
</ol>

  生活就是这么容易,只需要一个单词就实现了我们想要的效果。当然这个方法也是有所限制的,并不是所有的浏览器都是支持的,在这里同样盗用MDN的一张图来表达博主的意思:

  需要注意的是,上面的表格虽然现实Opera不支持reversed属性,但是博主用自己电脑上的opera24打开的时候,是能够显示倒序效果的,而IE浏览器,正如表格中显示的一样,直到IE11,仍然不支持这个属性。

  接下来介绍的就是用CSS实现的ol元素降序排序显示了。这里的实现思路是这样的:

  1. 不显示系统默认的list-style
  2. 利用伪元素 :before在每个li标签前面添加数字

  具体的技术细节我们等会儿再分析,直接干脆利落的上代码:

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ol reversed</title>
<style type="text/css">
ol.reverse {
list-style: none;
counter-reset: reverse 4;
}
ol.reverse > li:before {
content: counter(reverse) '.';
display: block;
position: absolute;
left: -30px;
text-align: right;
width: 20px;
}
ol.reverse > li {
counter-increment: reverse -1;
position: relative;
}
</style>
</head>
<body>
<ol class = "reverse">
<li>item1: I'm a boy</li>
<li>item2: I'm a boy too</li>
<li>item3: Are you kidding me?</li>
</ol>
</body>
</html>

  通过上面的实现方式,经过博主的检测,能够在Chrome37、opera24、IE8~IE11、FireFox32、Safari5.1中得到很好的显示效果。

  现在就开始解析这个实现过程。首先我们看到了几个即便是有着相对丰富的CSS经验的开发者也未必见过的属性:counter-reset 、counter-increment。这个两个属性主要是和CSS counters是一家。什么是css counters呢?在CSS2.1的规范中介绍了一种新技术,允许开发人员使用伪类:after:before或者伪元素::after::before给任何元素创建自动递增计数器——类似于列表中的项目符号(list-style-type)。也就是说,通过这个属性我们能够自定义所有元素设置计数器,那么ol元素自然也就不在话下。这三个属性必须是配合使用的, 说得更加准确一点是,要使用好CSS counters,就需要组合下面五个属性:

counter-reset:

  语法规则:counter-reset:[ <identifier> <integer>? ]+ | none | inherit 其中identifier用来定义计数器的名称,这个名称可以自定义。integer此值用来设置调用计算数器时起始值,默认值为0,在上面的例子中我们自定义了一个计数器reverse,起始值为4

counter-increment

  语法规则:counter-increment:[ <identifier> <integer>? ]+ | none | inherit 其中identifier计数器名称,就调用counter-reset声明的计数器的标识符,integer主要用来预设递增的值,如果取值为负值时,表示递减。默认值为1。在上面的例子中,我们调用了用counter-reset声明的计数器reverse,并且预设递减的值为1。

content

  content是和伪类:before:after或者伪元素::before::after配合在一起使用,主要功能用来生成内容。

counter

  counter()是一个函数,其主要配合content一起使用,counter()函数接受两个参数,而且两参数之间使用逗号(,)来分隔。第一个参数是counter-increment定义的属性值<identifier>,用来告诉该文档插入的计数器标识符名称是什么。第二个是用来设置计数器的风格,有点类似于list-style-type。默认情况之下取值为十制。在上面的例子中,我们只是传递了一个参数reverse,那么计数器的风格就是十进制。

伪元素 :before等

  **:before**、**:after**或**::before**、**::after**:配合content用来生成计数器内容。

(为了更好地理解CSS counters,博主推荐大家好好看着这个:http://www.w3cplus.com/css3/css-counters.html,讲解的非常清楚)

  到这里,为什么上面的代码能够实现逆序排序ol的列表也就非常清楚了。不过,为了严谨,我们仍然需要注意兼容性的问题。通过查阅MDN,博主得到了浏览器对于counter-reset和counter-increment的支持情况:

  那么我们能够下一个结论:这种方法能够在五大主流浏览器中得到比较好的支持,但是由于IE8还占有不小的市场份额,如果对于兼容性比较苛刻,需要谨慎考虑这种方法。

  最后,就要介绍杀手级的方法了,其实这也不算一种新的方法,只不过兼容不支持reversed的浏览器。我们上面提到过直到IE11还是不支持reversed属性,所以为了能够使reversed属性能够在IE浏览器中使用,就需要采用Javascript来解决了。方法其实也是比较简单的:

  (1)判断ol对象有没有reversed属性

  (2)如果没有reversed属性,给ol元素的直接li节点设置value属性。

  你可以在你的页面中引入下面的脚本,这样在IE8~IE11中你也能够使用reversed属性了。这段代码不是博主所写,有兴趣的可以在github上面查看源码:https://github.com/impressivewebs/HTML5-Reverse-Ordered-Lists/blob/master/js/script.js

 if (!('reversed' in document.createElement('ol'))) {

     (function () {
'use strict';
// Run the code on each ordered list with a "reversed" attribute.
var lists = document.getElementsByTagName('ol'),
length = lists.length,
i,
j,
child,
currChildren,
childrenLength,
start,
currCount,
val; for (i = 0; i < length; i += 1) { child = lists[i]; if (child.getAttribute('reversed') !== null) { currChildren = child.getElementsByTagName('li');
childrenLength = currChildren.length;
start = child.getAttribute('start'); // Check the existence of the start attribute and if it's
// a number.
if (start !== null && !isNaN(start)) {
currCount = start;
} else {
// Do this if the start attribute is not present. The first
// number is derived from the number of list items.
// (Ugh; Do we need double loops to get the correct count?) currCount = 0; for (j = 0; j < childrenLength; j += 1) { if (currChildren[j].parentNode === child) {
currCount += 1;
} }
}
// Go through each list item, adding the 'value' attribute
// plus currCount number then subtract one from currCount
// so we're ready for the next one.
for (j = 0; j < childrenLength; j += 1) { if (currChildren[j].parentNode === child) {
// Per spec, if set, the value attribute should be used
// and renumbering started from there.
val = currChildren[j].getAttribute('value'); if (val !== null && !isNaN(val)) {
currCount = val;
} currChildren[j].setAttribute('value', currCount);
currCount -= 1;
}
}
}
} }()); }

  那么,有关如何怎么实现元素ol的降序排序显示,就大概讲解到这里了。如果您希望转载本文,请注明转载地址:http://www.cnblogs.com/yuanzm/p/3995145.html

本文用到的参考连接如下:

1. MDN关于ol标签的介绍:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

2. ol元素的相关属性:type、start、value和reversed: http://www.zhangxinxu.com/wordpress/2012/03/css-html-ol-type-start-value-reversed/

3. 伪元素 :before: https://developer.mozilla.org/en-US/docs/Web/CSS/::before

4. CSS counter: http://www.w3cplus.com/css3/css-counters.html

怎么实现元素ol的降序排序显示的更多相关文章

  1. 通过orderby关键字,LINQ可以实现升序和降序排序。LINQ还支持次要排序。

    通过orderby关键字,LINQ可以实现升序和降序排序.LINQ还支持次要排序. LINQ默认的排序是升序排序,如果你想使用降序排序,就要使用descending关键字. static void M ...

  2. R_Studio(关联)使用apriori函数简单查看数据存在多少条关联规则,并按支持度降序排序输出

    查看数据menu_orders.txt文件存在多少条关联规则,并按支持度降序排序输出 #导入arules包 install.packages("arules") library ( ...

  3. c++ sort降序排序

    sort是c++ STL中提供的一个函数模板,可以用来对多种类型进行排序. 默认是升序排序.它有两种使用方法: default (1) template <class RandomAccessI ...

  4. 现在输入 n 个数字, 以逗号, 分开; 然后可选择升或者 降序排序;

    /* 现在输入 n 个数字, 以逗号, 分开: 然后可选择升或者 降序排序: */ import java.util.*; public class bycomma{ public static St ...

  5. java数组降序排序之冒泡排序

    import java.util.Arrays;//必须加载 class Demo{ public static void main(String []args){ int[] arr={3,54,4 ...

  6. 用shell处理以下内容 1、按单词出现频率降序排序! 2、按字母出现频率降序排序! the squid project provides a number of resources toassist users design,implement and support squid installations. Please browsethe documentation and support

    此题目有多种解法,sed.awk.tr等等,都可以解决此题,命令运用灵活多变. 编写shell脚本no_20.sh 解法1: #!/bin/bash ###-------------CopyRight ...

  7. DataGridView使用技巧十三:点击列头实现升序和降序排序

    DataGridView 列有三种排序模式.每一列的排序模式是通过该列的 SortMode 属性指定的,该属性可以设置为以下的 DataGridViewColumnSortMode 枚举值之一. Da ...

  8. 【java】实体类中 按照特定的字段 进行升序/降序 排序

    背景: 实际页面上  所有的分值都是按照JSON格式存储在一个字符串中 存储在同一个字段中: {"ownPTotal":"10>0","ownO ...

  9. java算法面试题:有一个字符串,其中包含中文字符、英文字符和数字字符,请统计和打印出各个字符的个数 按值的降序排序,如果值相同则按键值的字母顺序

    package com.swift; import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; publi ...

随机推荐

  1. EMR,电子病历(Electronic Medical Record)

    电子病历 电子病历(EMR,Electronic Medical Record),也叫计算机化的病案系统或称基于计算机的病人记录(CPR,Computer-Based Patient Record). ...

  2. Corba、protocol buffer、SOA的区别 (转)

    From: http://www.zhihu.com/question/20279489 Google的protocol buffers?这个跟corba.soa没啥关系,不同层次的概念,没法比.pr ...

  3. Devexpress VCL Build v2015 vol 15.2 开始测试

    增加了几个小玩意,与大版本变化根本无法匹配. 具体可以官网了解 https://www.devexpress.com/Subscriptions/New-2015.xml?product=vcl

  4. 比较详细PHP生成静态页面教程

    一,PHP脚本与动态页面. PHP脚本是一种服务器端脚本程序,可通过嵌入等方法与HTML文件混合, 也可以类,函数封装等形式,以模板的方式对用户请求进行处理.无论以何种方式,它的基本原理是这样的.由客 ...

  5. swift 批量 取出中间文本

    func stringmid_pl (wholestring:String,front:String,behind:String,inout return_string:String,getheroi ...

  6. ArcGIS Wpf MarkerSymbol 图形符号无法序列化为 JSON

    [问题贴,尚不知如何解决] 在GraphicsLayer中添加一个点,使用自定义模板渲染该点,在Vs2012设计界面可以看到,但运行时出现异常 代码如下: <esri:Graphic x:Nam ...

  7. if条件里比较浮点数

    晚上看会儿书,基础的东西,很多都不熟练,不得不佩服那些人真的很厉害,为啥会想到那些,我这傻脑袋是想不到,暂时...... 比较3.3333与3 #!/bin/bash var1=`echo " ...

  8. linux各种命令

    命令  [选项]  [参数] read  -t  30    -p   "Please input a num: "   num 功能:将键盘输入的数赋予num ps   aux  ...

  9. js判断访问终端

    //判断访问终端 var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; ...

  10. Nodejs编码转化问题

    目前Node.js仅支持hex.utf8.ascii.binary.base64.ucs2几种编码的转换.对于GBK,GB2312等编码,Nodejs自带的toString()方法不支持,因此中文转化 ...