CSS的未来：一些试验性CSS属性（6）
作者：vocal 来源：前端观察 发布时间：2011-06-10 13:20:00
标签：css,属性
CSS 2.1属性
counter-increment
你是否经常希望你可以让一个有序列表或者一篇文章的所有标题自动编号？不幸的是，目前尚未有CSS3属性支持。但是在CSS 2.1中，counter-increment 提供了一个解决方案。这就意味着它已经出现好些年了，而且在IE8中就已经支持了。
配合:before 伪元素和content 属性，counter-increment可以为所有的HTML标签添加自动的编号。即便是嵌套的编码也是支持的。
示例
要给标题编码，先将计算器重设一下:
body {counter-reset: thecounter}
下面的样式让每一个<h1>标题都有一个”Section”的前缀，然后其后面的数字自动的递增1(这是默认的，可以省略掉)，这里thecounter是计算器的名称:
.counter h1:before {
counter-increment: thecounter 1;
content:"Section"counter(thecounter)":";
}
示例
对于一个嵌套编码的列表，重设计数器，然后关掉<ol>的自动编码，因为它是无嵌套的:
ol {
counter-reset: section;
list-style-type: none;
}
然后，每个<li>设置为自动编号，分割符是一个点(.)，后面跟着一个空格
li:before {
counter-increment: section;
content: counters(section,".")"";
}
HTML代码：
<ol>
<li>item</li> <!-- 1 -->
<li>item <!-- 2 -->
<ol>
<li>item</li> <!-- 1.1 -->
<li>item</li> <!-- 1.2 -->
</ol>
</li>
<li>item</li> <!-- 3 -->
<ol>
浏览器支持: CSS 2.1.，所有的现代浏览器，IE 7+.
0
投稿猜你喜欢
- Varchar 对每个英文(ASCII)字符都占用2个字节，对一个汉字也只占用两个字节char 对英文(ASCII)字符占用1个字节，对一个
插入数据insert into 表名(列名1,列名2,列名3) values(值1,值2,值3);insert into user(user- 在学会了抓包，接口请求(如requests库）和Selenium的一些操作方法后，基本上就可以编写爬虫，爬取绝大多数网站的内容。在爬虫领域，
- 定时任务是老生常谈了，因为我们总是需要定时修改特定的数据。实现它的方法肯定不止一种，但我在相当长一段时间里都是用程序编码去做的，今天突然想到
- 大致介绍在python爬虫爬取某些网站的验证码的时候可能会遇到验证码识别的问题，现在的验证码大多分为四类：1、计算验证码 &nbs
- variables_to_restore函数，是TensorFlow为滑动平均值提供。之前，也介绍过通过使用滑动平均值可以让神经网络模型更加
- 大家好，我是煎蛋哥！全国有很多彩民，其中购买最多的彩种分别是体彩大乐透和福彩双色球；虽然中大奖的概率极低，但是彩民纷至沓来，一方面抱着一份中
- 一、问题1.1 鼠标放上去不显示文档的提示鼠标放在随意一个函数上面不显示他的说明了我也不知道是咋了二、解决2.1 首先我只记得有一个侧边栏叫
- 在我遇到 SimPy 包的其中一位创始人 Klaus Miller 时，从他那里知道了这个包。Miller 博士阅读过几篇提出使用 Pyth
- skimage的transform模块图像的形变与缩放，使用的是skimage的transform模块，函数比较多，功能齐全。1、改变图片尺
- http://swik.net/Ajax/Ajax+Mistakes在某网站瞎逛时，发现这个链接，进去逛了逛，觉得很有意思，大家也可以去看看
- 什么是目标检测目标检测关注图像 * 定的物体目标，需要同时解决解决定位（localization） + 识别（Recognition）。相比分
- 啄木鸟社区上原始翻译后绘制的，最早这个图是出现在（链接已失效）“这个图太棒了，有编程基础的人一下子就了解 Python 的用法了。真正的 3
- 如何创建列表，或生成列表。这里介绍在python的基础知识里创建或转变或生成列表的一些方法。零个，一个或一系列数据用逗号隔开，放在方括号[
- 本文实例讲述了Python中文分词实现方法。分享给大家供大家参考，具体如下：在Python这pymmseg-cpp 还是十分方便的！环境 u
- 所见即所得的文本编辑器目前在网上流传的已经有很多了，并且都比较优秀，就我个人而言，用过的有以下几个： ·
- 使用opencv自带的模板匹配1、目标匹配函数：cv2.matchTemplate()res=cv2.matchTemplate(image
- 阅读上一篇：FrontPage2002简明教程六：图片库 虽然FrontPage已经给我们提供了很多面很强大的所见即所得的工具，但是随着HT
- 在实际编程开发中，我们会使用到各类的加密算法来对数据和信息进行加密。比如密码中比较常见的MD5加密，以及AES加密等等。对于密码认证来说，M
- Ajax类
