需求：一个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. APT典型应用示例

    Ubuntu下的APT(Advanced Packaging Tools,高级软件包管理工具)是用于在Ubuntu下用于软件安装.升级.维护的工具.注意运行apt指令需要root权限. 下面是一个简单 ...

  2. splitter 使用

    splitter1.Width = ; splitter1.Height = ; Label l = new Label(); l.Text = "···"; //写入的字,具体指 ...

  3. === $ spark sql 的特别的方法

    /** * Equality test. * {{{ * // Scala: * df.filter( df("colA") === df("colB") ) ...

  4. Sublime Text2/3怎样在Mac OSX中配置CTags插件

    参考地址: http://jingyan.baidu.com/article/48206aeafba820216ad6b3f5.html

  5. vagrant中css,img不生效的问题

    用vagrant搭建了一个共享开发平台,修改css文件后,页面看不到效果,通过查看源文件地址,发现新修改的Css文件并没有加载进来,加载的还是旧的文件地址.一开始以为是浏览器有缓存,清空了各种浏览器缓 ...

  6. iOS美丽约网络请求分析

    网络请求分析html, body {overflow-x: initial !important;}html { font-size: 14px; } body { margin: 0px; padd ...

  7. 【WPF】绑定Hyperlink超链接

    Hyperlink超链接的简单使用 前台XAML: <TextBlock> 说明文字: <Hyperlink NavigateUri="http://www.qq.com& ...

  8. am335x Lan8710a 双网口配置

    一. 经过调试, LAN8710A在 am335x 上面需要使用 GMII的模式,设备树 pin mux配置如下: // 下面是工作模式的配置,在睡眠模式下是配成GPIO模式 162 cpsw_def ...

  9. Docker常用命令<转>

    创建redis服务端docker run -p 6379:6379 -d --name redis-server docker.io/redis:3.0.7 redis-server -- port ...

  10. Linux下的微秒级别的定时器

    /* * @FileName: test_sleep.c * @Author: wzj * @Brief: * * * @History: * * @Date: 2012年02月07日星期二22:20 ...