需求：一个table 需要在第一列生成序号：1、2、3、4、5......  并且自适应行数

不使用后台程序，开始考虑使用JS，但是一旦前台排序后，序号就乱了，
最后采用CSS的一个计数器方法实现！

<!DOCTYPE html>

<html>

<head>

<style>
/*couter-reset：创建或重置一个或多个计数器*/

body {counter-reset:section;}

h1 {counter-reset:subsection;}
/*伪元素:before ：在每个h1内容之中的第一个之前执行*/

h1:before

{

counter-increment:section;　　/* counter-increment：递增一个或多个计数器值*/

content:"Section " counter(section) ". ";　　/* content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容 */

}

h2:before

{

counter-increment:subsection;

content:counter(section) "." counter(subsection) " ";

}

</style>

</head>

<body>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

<h1>HTML tutorials</h1>

<h2>HTML Tutorial</h2>

<h2>XHTML Tutorial</h2>

<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>

<h2>JavaScript</h2>

<h2>VBScript</h2>

<h1>XML tutorials</h1>

<h2>XML</h2>

<h2>XSL</h2>

</body>

</html>

简单介绍上例中使用的属性

1、伪元素:before 选择器，向选定的元素前插入内容。使用 content 属性来指定要插入的内容。

<!DOCTYPE html>

<html>

<head>

<style>

p:before

{

content:"Read this -";

}

</style>

</head>

<body>

<p>My name is Donald</p>

<p>I live in Ducksburg</p>

<p><b>Note:</b> For :before to work in IE8, a DOCTYPE must be declared.</p>

</body>

</html>

效果：

Read this -My name is Donald
Read this -I live in Ducksburg
Read this -Note: For :before to work in IE8, a DOCTYPE must be declared.

2、:after 选择器向选定的元素之后插入内容。使用 content 属性来指定要插入的内容。

<!DOCTYPE html>

<html>

<head>

<style>

p:after

{

content:"- 注意我";

}

</style>

</head>

<body>

<p>我的名字是 Donald</p>

<p>我住在 Ducksburg</p>

<p><b>注意：</b> :after在IE8中运行，必须声明<!DOCTYPE> </p>

</body>

</html>

效果：

我的名字是 Donald- 注意我
我住在 Ducksburg- 注意我
注意： :after在IE8中运行，必须声明 - 注意我

3、counter-reset：创建或重置一个或多个计数器，通常是和counter-increment属性，content属性一起使用

4、counter-increment：递增一个或多个计数器值，通常用于counter-reset属性和content属性。

5、content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

<!DOCTYPE html>

<html>

<head>

<style>

body {counter-reset:section;}

h1 {counter-reset:subsection;}

h1:before

{

counter-increment:section;

content:"Section " counter(section) ". ";

}

h2:before

{

counter-increment:subsection;

content:counter(section) "." counter(subsection) " ";

}

</style>

</head>

<body>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

<h1>HTML tutorials</h1>

<h2>HTML Tutorial</h2>

<h2>XHTML Tutorial</h2>

<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>

<h2>JavaScript</h2>

<h2>VBScript</h2>

<h1>XML tutorials</h1>

<h2>XML</h2>

<h2>XSL</h2>

</body>

</html>

效果：

css3 -- 自动生成序号（不使用JS,可任意排序）的更多相关文章

  1. 页面定制CSS代码初探（六）：h2、h3 标题自动生成序号 详细探索过程

    前言 最近在整理博客写作格式的规范,碰到一个问题:标题要不要加序号? 直到我碰到一个人这么说 手动维护编号实在是一件很闹心的事情, 如果位置靠前的某个段落被删除了, 那么几乎每个段落的编号都要手动修改 ...

  2. Jquery Datatable自动生成序号

    公司项目里,使用的是jquerydatatable框架来展示数据的,在使用的时候遇到一个问题,就是要自动生成序号,且在分页的时候,下一页的序号紧跟着前一页的序号,下面是代码: "fnDraw ...

  3. 利用"SQL"语句自动生成序号的两种方式

    1.首先,我们来介绍第一种方式: ◆查询的SQL语句如下: select row_number() over (order by name) as rowid, sysobjects.[id] fro ...

  4. 利用"SQL"语句自动生成序号的两种方式

    1.首先,我们来介绍第一种方式: ◆查询的SQL语句如下: select row_number() over (order by name) as rowid, sysobjects.[name] f ...

  5. 设计一个自动生成棋盘格子的JS小程序

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. [JSP] c:forEach 输出序号 每行自动生成序号

    关键在于<c:forEach>的varStatus属性,具体代码如下: <table width="500" border="0" cells ...

  7. 如何在jasperreport自动生成序号

    在导出报表时,有时候我们需要显示序号,有两种方法: 1.就是再加一个字段,就是说将序号也当做是要导出的字段来处理,然后用程序给这个字段赋值,这方面有点傻,就不说了. 2.利用jasperreport提 ...

  8. WPF DataGrid自动生成序号

    需求和效果 应用WPF技术进行开发的时候,大多都会遇到给DataGrid添加序号的问题,今天分享一下查阅了很多stackoverflow的文章后,总结和改进过来的方法,先看一下效果图,文末附Demo下 ...

  9. SQL 自动生成序号

    查询出来的数据的编号,不是按照从1开始的有序进行的,界面上显示想显示有序排序 select RANK() OVER(ORDER BY id ) as ID ,* from reconcilet_det ...

随机推荐

  1. [iOS]终极横竖屏切换解决方案

    [iOS]终极横竖屏切换解决方案 大家的项目都是只支持竖屏的吧?大多数朋友(这其中当然也包括博主),都没有做过横屏开发,这次项目刚好有这个需求,因此把横竖屏相关的心得写成一遍文章供诸位参考. 01.综 ...

  2. (转)大白话讲解如何给github上项目贡献代码

    转自:https://site.douban.com/196781/widget/notes/12161495/note/269163206/ 2013-03-30 22:53:55   本文献给对g ...

  3. android开发图片分辨率

    一直受到android开发图片分辨率问题困扰.drawable-(xdpi,hdpi,mdpi,ldpi,nodpi)这几个文件夹到底怎么放图片呢? dpi是什么呢? dpi是“dot per inc ...

  4. 【C/C++】标准IO操作

    fwrite实现文件复制 //@ author 成鹏致远 //@ net http://infodown.tap.cn //@ qq 552158509 //@ blog lcw.cnblogs.co ...

  5. Asp.Net MVC TryUpdateModel使用说明

    修改功能每个网站里都有,也有很多写法 写法1:要修改的字段刚好等于表中的字段 [HttpPost] [ValidateAntiForgeryToken] public ActionResult Edi ...

  6. SpringMVC中的 JSR 303 数据校验框架说明

    JSR 303 是java为Bean数据合法性校验提供的标准框架,它已经包含在JavaEE 6.0中. JSR 303 通过在Bean属性上标注类似于@NotNull.@Max等标准的注解指定校验规则 ...

  7. vim复制内容到系统剪贴板

    vim提供了y键盘操作用于复制文本,但是复制之后的文本位于当前窗口的缓冲区中,不在系统剪贴板中,这给跨程序文本拷贝代码很来很多麻烦.搜索发现,可以使用]y指令快速将选定的文本复制到系统剪贴板中. 顺便 ...

  8. python 使用pillow将图片转换为webp格式

    1.webp格式 webp格式是谷歌开发的一种旨在加快图片加载速度的格式,将图片转为webp格式后,体积约为原来的2/3,这可以节省大量的服务器带宽,微信公众号文章里的图片就是这种格式的. 2.使用p ...

  9. Xapian构建索引说明

    Reference: http://www.totogoo.com/article/115/xapian-desc.html Xapian与开源 Xapian的官方网站是http://www.xapi ...

  10. 解决sql server不允许保存表结构修改的问题

    说明(2017-5-25 15:38:09):