html5有序列表字母编号,在HTML中编号嵌套的有序列表

「爱情、让人受尽委屈。」 2022-10-05 12:47 154阅读 0赞

这是一个适用于所有浏览器的示例。纯CSS方法可在实际的浏览器中使用(即，除IE6 / 7之外的所有内容)，而jQuery代码将覆盖不受支持的代码。它具有SSCCE的风格，您无需更改即可复制'n'paste'n'run。

SO question 2729927

$(document).ready(function() \{

if ($('ol:first').css('list-style-type') != 'none') \{ /\* For IE6/7 only. \*/

$('ol ol').each(function(i, ol) \{

ol = $(ol);

var level1 = ol.closest('li').index() + 1;

ol.children('li').each(function(i, li) \{

li = $(li);

var level2 = level1 + '.' + (li.index() + 1);

li.prepend('' + level2 + '');

\});

\});

\}

\});

html>/\*\*/body ol \{ /\* Won't be interpreted by IE6/7. \*/

list-style-type: none;

counter-reset: level1;

\}

ol li:before \{

content: counter(level1) ". ";

counter-increment: level1;

\}

ol li ol \{

list-style-type: none;

counter-reset: level2;

\}

ol li ol li:before \{

content: counter(level1) "." counter(level2) " ";

counter-increment: level2;

\}

ol li span \{ /\* For IE6/7. \*/

margin: 0 5px 0 -25px;

\}

1.  first
2.  second
    
    1.  second nested first element
    2.  second nested second element
    3.  second nested third element
3.  third
4.  fourth

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关 html之无序列表和有序列表

无序列表 html代码： <ul type=""> <li>苹果</li> <li>梨</li> <li>香

以你之姓@/ 2022年12月19日 13:13/ 0 赞/ 180 阅读

相关 HTML中的有序列表、无序列表和自定义列表

列表标签表格是用来显示数据的，列表用来布局列表最大的特点就是整齐、整洁、有序，它作为布局会更加的自由和方便。列表可以分为三大类：无序列表、有序列表和自定义列表。

ゞ浴缸里的玫瑰/ 2022年12月15日 14:14/ 0 赞/ 210 阅读

相关 HTML：有序列表、无序列表、自定义列表的区别&写法

目录一、三种列表的简介 1、有序列表——ol 2、无序列表——ul 3、自定义列表——dl 二、三种列表的写法 1、有序列表：是ol标签里面包着li标签 2、

╰+哭是因爲堅強的太久メ/ 2022年11月17日 05:30/ 0 赞/ 328 阅读

相关 html5有序列表字母编号,在HTML中编号嵌套的有序列表

这是一个适用于所有浏览器的示例。纯CSS方法可在实际的浏览器中使用(即，除IE6 / 7之外的所有内容)，而jQuery代码将覆盖不受支持的代码。它具有SSCCE的风格，您无需

「爱情、让人受尽委屈。」/ 2022年10月05日 12:47/ 0 赞/ 155 阅读

相关 JavaWeb学习之路(19)–HTML之无序列表、有序列表

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 列表的概念 2. 无序列表 3. 有序列表 4. 小结 1. 列

r囧r小猫/ 2022年09月14日 00:16/ 0 赞/ 261 阅读

相关 HTML十进制字符编号

[http://liuxufei.com/weblog/weifenlei/71.html][http_liuxufei.com_weblog_weifenlei_71.htm

快来打我*/ 2022年05月13日 05:44/ 0 赞/ 161 阅读

相关 HTML5-从0开始学习之有序，无序列表

我们在浏览网页中经常会看到各种各样的列表，我们现在来学习如何制作两种列表。 1.有序列表 <body> <ol> <

妖狐艹你老母/ 2022年05月03日 03:30/ 0 赞/ 250 阅读

相关 HTML十进制字符编号

[http://liuxufei.com/weblog/weifenlei/71.html][http_liuxufei.com_weblog_weifenlei_71.htm

迷南。/ 2022年04月15日 07:45/ 0 赞/ 142 阅读

相关 HTML的无序列表、有序列表、自定义列表

HTML的无序列表： 1.无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul 标签。每个列表项始于 <li。 > 2.无

落日映苍穹つ/ 2022年02月15日 18:25/ 0 赞/ 782 阅读

相关 HTML
有序列表

HTML `< ol>` 有序列表 ol的英文全称是ordered lists，翻译成汉语就是有序列表的意思。顾名思义，使用`< ol>`标签可以创建有序列表，列表...

小灰灰/ 2020年05月16日 17:15/ 0 赞/ 893 阅读