需求：一个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. 【qt】QT 的信号与槽机制

    QT 是一个跨平台的 C++ GUI 应用构架,它提供了丰富的窗口部件集,具有面向对象.易于扩展.真正的组件编程等特点,更为引人注目的是目前 Linux 上最为流行的 KDE 桌面环境就是建立在 QT ...

  2. 转webstorm的快捷键

    止 静 java android 转-webstorm快捷键 默认配置-Eclipse的常用快捷键对照表 查找/代替 Webstorm快捷键 Eclipse快捷键 说明 ctrl+shift+N ct ...

  3. 软链接ln -s以及如何解决其产生“Too many levels of symbolic links ”的错误？

    Q1:如何利用ln -s来创建快捷方式? A1:ln(link,链接文件): Windows中的快捷方式,实际上快捷方式和它指向的文件是独立的两个文件,两个都占硬盘空间,只不过用户访问快捷方式时,其效 ...

  4. 基于jquery判断浏览器版本过低代码

    基于jquery判断浏览器版本过低代码.这是一款对不支持HTML5跟CSS3代码的浏览器提示用户更换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div sty ...

  5. 机器学习集成算法--- 朴素贝叶斯,k-近邻算法,决策树,支持向量机(SVM),Logistic回归

    朴素贝叶斯: 是使用概率论来分类的算法.其中朴素:各特征条件独立:贝叶斯:根据贝叶斯定理.这里,只要分别估计出,特征 Χi 在每一类的条件概率就可以了.类别 y 的先验概率可以通过训练集算出 k-近邻 ...

  6. Servlet实例开发---学生管理系统

    Servlet总结 本程序采用Servlet开发技术,MVC分层,所有程序在设计时都要接口为操作的标准,主要逻辑操作只有增删改查. 具体实现操作请看源代码. 本程序采用的是MYSQL数据库,需加入相应 ...

  7. prepareEditor

    @Override public Component prepareEditor(TableCellEditor editor, int row, int column) { final Compon ...

  8. WPF中查找控件的扩展类

    在wpf中查找控件要用到VisualTreeHelper类,但这个类并没有按照名字查找控件的方法,于是搜索网络,整理出下面这个类,感觉用起来很是方便. 贴出来,供大家参考. /// <summa ...

  9. EF code First数据迁移学习笔记

    准备工作 1.新建一个控制台项目, 在"程序包管理控制台"执行 Install-package EntityFramework  //安装EF环境 2.在项目下新建类(Paper) ...

  10. 妙用CTE，一条语句实现sql递归查询，SQLServer 递归

    数据库设计中经常碰到父子节点的关系结构,经常需要找到某个节点的根,或者某个节点的所有子节点,一般做法都是在业务层做递归的方式实现,或者数据库存储过程实现.但其实SQLServer提供的CTE可以很好的 ...