需求：一个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. DIOCP开源项目-DIOCP3的ECHO测试<贴图>

    星期六开了测试台测试机子.星期天休息,今天早上来接两个图 开了2个客户端,一个qsl的echo client,一个是楠楠的dbiocp回调客户端.建立13240个连接 今天来后,机子很卡,后来发现是楠 ...

  2. Ubuntu14.04下安装eclipse

    环境:Ubuntu 14.04 步骤: 1.安装配置JDK,详见 http://my.oschina.net/u/1407116/blog/227084 2.下载eclipse 从官网http://w ...

  3. JAVA反射的使用之ResultSet的自动转换

    Hello,大家好,上篇文章我们说了下反射的基本情况和简单使用,那么本篇文章我们就使用反射写一个工具类.用来将数据库查询结果的ResultSet转换为指定类型的对象.使用反射来实现ResultSet内 ...

  4. STL之std::set、std::map的lower_bound和upper_bound函数使用说明

    由于在使用std::map时感觉lower_bound和upper_bound函数了解不多,这里整理并记录下相关用法及功能. STL的map.multimap.set.multiset都有三个比较特殊 ...

  5. hdu1599(无向图的最小环模板)

    题意:杭州有N个景区,景区之间有一些双向的路来连接,现在8600想找一条旅游路线,这个路线从A点出发并且最后回到A点,假设经过的路线为V1,V2,....VK,V1,那么必须满足K>2,就是说至 ...

  6. Android SDK下载和更新失败解决方法

    原因是dl-ssl.google.com访问不到,解决方法就是修改C:\Windows\System32\drivers\etc\hosts文件.添加一行: 74.125.237.1       dl ...

  7. JavaScript高级 面向对象（11）--对象的动态特性-关联数组用法

    说明(2017.4.2): 1. 对象的动态特性: (1)在js中,一个对象需要属性,就可以利用“对象名.属性 = 值”的方式为其添加,只要赋值成功,对象就新增这个属性. (2)对象属性的访问形式: ...

  8. iOS开发中的火星坐标系及各种坐标系转换算法

    原文地址:http://m.oschina.net/blog/619183?ref=myread 其原理是这样的:保密局开发了一个系统,能将实际的坐标转换成虚拟的坐标.所有在中国销售的数字地图必须使用 ...

  9. php的变量引用与销毁机制

    在php中,符号"&"表示引用. 1.看看不引用的情况是这样子: $a  = "hello world";//定义一个变量,下面赋值给$b $b = $ ...

  10. 使用WPF Application Framework (WAF)框架

    Visual Studio新建WAF项目的模板:https://marketplace.visualstudio.com/items?itemName=jbe2277.WAFProjectTempla ...