需求：一个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. Python fabric实践操作

    前面学习了理论,下面该练练手了.两台机器:10.1.6.186.10.1.6.159.fabric部署在10.1.6.186上面. 1  执行一个简单的task任务,显示两台机器的/home/guol ...

  2. (装机)关于WINRE/ESP/LRS_ESP/MSR/PBR这些分区

    WINRE 1GB 用途:Windows 8 系统恢复模式.这个分区是保存是在Windows 8 系统主体本身被破坏无法正常启动的时候进行系统修复的Windows 8 PE系统.. ESP 260MB ...

  3. spark读取hdfs数据本地性异常【转】

    在分布式计算中,为了提高计算速度,数据本地性是其中重要的一环. 不过有时候它同样也会带来一些问题. 一.问题描述 在分布式计算中,大多数情况下要做到移动计算而非移动数据,所以数据本地性尤其重要,因此我 ...

  4. spring AspectJ切入点语法详解 记录以便查阅

    AspectJ切入点语法详解 6.5.1  Spring AOP支持的AspectJ切入点指示符 切入点指示符用来指示切入点表达式目的,,在Spring AOP中目前只有执行方法这一个连接点,Spri ...

  5. Android MPAndroidChart LineChart 显示数据格式化

    最近帮助同学,使用MPAndroidChart 控件,在图表显示时候, class MyValueFormatter implements IValueFormatter { @RequiresApi ...

  6. 无刷新文件上传 利用iframe实现

    效果如图: 示例是基于asp.net mvc实现的 html代码: <form id="form2" name="form2" class="f ...

  7. C#学习笔记（23）——C#将PPT批量转为JPG（aspose方法）

    说明(2017-7-31 18:30:25): 1. 最主要的是下载到aspose的破解文件,我在这里下载的http://www.lenosoft.net/down/10205.htm,如果不差钱可以 ...

  8. C#学习笔记（12）——三种方法操作XML

    说明(2017-7-11 16:56:13): 原文地址: C#中常用的几种读取XML文件的方法 XML文件是一种常用的文件格式,例如WinForm里面的app.config以及Web程序中的web. ...

  9. wamp安装xdebug特殊情况win7 64位安装32位wamp

    在wamp上安装xdebug网上很多文章都介绍了方法,但是我这里遇到了一个很特殊的情况,在网上很少有人提及: 我机器是win7 64位的,安装的wamp1.7.4是32位的,这是后来导致出现奇怪现象的 ...

  10. 启动Tomcat报错：class path resource cannot be opened

    直接原因:WEB-INF/classes下没有文件,即eclipse项目文件没有发布到Tomcat的文件夹. 根本原因:项目的Java Build Path /Libraries 里tomcat 和j ...