CSS content, counter-increment 和 counter-reset详解

最新推荐文章于 2022-10-11 15:39:50 发布

liumf2005

最新推荐文章于 2022-10-11 15:39:50 发布

阅读量1.3k

点赞数

分类专栏： javascript webkit

webkit 同时被 2 个专栏收录

132 篇文章 0 订阅

订阅专栏

javascript

93 篇文章 0 订阅

订阅专栏

http://www.qianduan.net/css-content-counter-increment-counter-reset.html *****

译自： CSS Content, Counter-Increment & Counter-Reset
中文原文： CSS content, counter-increment 和 counter-reset详解
请尊重版权，转载请注明出处，多谢！

前些天，我们发布了一篇《10个很有用但是IE浏览器不支持的CSS属性》，中间提到了了两个不常用的属性Counter-Increment和Counter-reset，相信很多人会对它们比较挺迷惑，那么今天就让我们一起来学习一下。

在IE7还不支持counter 和increment 属性之前，我从来没有用过它们，也从来没有使用过:before 伪元素和content 属性。然而IE8开始全部支持这些css特性了，所以，我想是时候好好研究一下它们了。

<ol>的start属性和<li>的value属性在HTML 4.01标准中是不赞成使用的，而且也不被XHTML strict支持。value属性设置列表元素的值，让它后面的条目从该value值递增。然而，没有其它XHTML元素可以替代这些元素，不过CSS 2.1 提供了在任何元素上设置递增序列的方法，而不仅仅是在<li>元素上。本文主要关注以下CSS伪元素和属性：

content CSS 属性
:before 伪元素
:after 伪元素
counter-increment CSS 属性
counter-reset CSS 属性

content属性通常配合:before 或:after 伪元素一起使用。content 的属性的值添加到你的文档的表现上面，但是没有(而且不会)被添加到DOM中。如果你开始阅读本教程，你需要了解这一点！你用Firebug之类的工具查看相关元素的时候，或者查看页面的源代码的时候，是不会看到content的属性值的。我们在这里讨论:before、 :after 和content是因为，没有它们，counter基本上是派不上用场的：如果你不是在元素的前面（或者后面）显示某些内容，你为什么要用这个呢？

content属性概述

为了让本教程更容易理解，我们先来看一个在链接后面添加” – hrefValue” 的具体的例子：

<ul id="showlinkafterlink">
	<li><a href="http://www.qianduan.net">前端观察</a></li>
	<li><a href="http://bestcss.net">BestCSS</a></li>
	<li><a href="http://bbs.qianduan.net">前端社区</a></li>
</ul>

例1: 没有任何CSS的时候上面的HTML代码的表现。

1
2
3

#showlinkafterlink a:after {
content:" - <" attr(href) ">";
}

例2: 如果你在使用一个兼容网页标准的浏览器(当然，不包括IE6和IE7)，在添加了以上样式以后，上面的HTML代码将会这样显示。

对于通过content 属性渲染内容，需要注意的一些事情是:

产生的内容不会改变文档树。内容只是被渲染，但不会出现在DOM树中，只是影响页面的展示，不会影响代码(所以你会发现，下面网站名称后面的链接是不能交互的)。
要控制生成的内容的表现，你可以使用其它的CSS属性。比如在:after伪元素中声明的所有属性都会对产生的内容起作用。
也许你需要知道，在一个元素的每一边，伪元素只能添加一次。element:before:before这种写法是无效的。

改变一下样式：

#showlinkafterlink a:after {
content:"   - <" attr(href) ">";
color: #ff0000;
font-style: italic;
}

例3: 这里我们为生成的内容定义了字体颜色和样式。

因为生成的内容没有被添加到DOM，可以认为它就是一个添加的span，样式继承自其父级元素。content 不能包含任何HTML，只能包含ASCII，也不能使用ISO 字符集。content要与:before 和:after 伪元素一起使用来在一个文档内生产内容。

CSS content 属性值

CSS content 属性可以包括以下值：

content:none | normal |<string>	| url | open-quote | close-quote | no-open-quote | no-close-quote | attr(attribute) | counter(name[, style])

这些值的解释如下：

1	`content: none;`

none:该伪元素将不会被生成。

1	`content: normal;`

normal: 将:before和:after伪元素计算成‘none’

1	`content: "Estelle: ";content: " 00a3"; /* includes "£" */`

string: 在元素的前面或后面添加一个字符串(看你使用的是哪个伪元素)。字符串可以使用单引号或双引号。如果你的字符串包括一个引号，请确保你避免使用斜杠("")或斜杠的ISO值。如果你要包括任何非ASCII字符集或实体，在CSS和XHTML中声明该字符，并/或为该字符使用ISO编码(如："\00a3")。详细的介绍请查看在CSS和Javascript中引入命名实体

1	`content: url(myBullet.gif);`

url: 这个值是一个标明一个外部资源的URI(比如一个图片)。如果浏览器不能显示这个资源，FF 和IE8 会忽略它，就像它没有被指定，但是Safari 会指出该资源不能被显示，并显示一个"图片丢失"的图标。

1	`content: open-quote;`

open-quote 和close-quote: 这两个值被来自于"quotes"属性的相应的字符替代。Opera 可以处理这写值，但是不能正确的嵌套，Safari 完全无视这个属性，IE8 和Firefox 可以正确处理它。

1	`content: no-open-quote;`

no-open-quote 和no-close-quote: 不引入内容，但是增加(减少) 引用的嵌套级别。Safari 完全无视这些值，Opera, IE8 和Firefox 可正确处理。

1	`content: attr(title);`

attr(x): 这个函数为选择器的对象返回属性X的值，并将其作为一个字符串。该字符串不会被CSS处理器解析。如果该选择器的对象不包含一个属性X，将返回一个空字符串。属性名称的大小写敏感型依赖于文档的语言。

所以，你不使用Javascript也能可以动态添加文本:

a.tooltip {
  position: relative;
}
a.tooltip:hover:after {
  content: attr(title);
  position:absolute;
  display:block;
  padding: 5px;
  border: 1px solid #f00;
  background-color: #dedede;
}

1	`content: counter(subtitles, decimal);content: counter(headers) "." counter(subtitles) ": ";`

counter(name) 或counter(name, style): counter 有两个参数：name，你可以提到increment或 reset；style，如果没有被声明，默认为"decimal"(十进制数字)。尽管你可以为counter 命名除了‘none’, ‘inherit’ or ‘initial’之外的所有值，但是请避免关键术语。

CSS content 属性和:before 、:after 伪元素的浏览器支持情况：

因为在IE6 和IE7 以及IE8的IE7兼容模式中，:before 和:after 都不被支持，所以可以认为它们都不支持content 属性，测试也就毫无意义，所以这个列表将IE6、IE7和IE8的IE7兼容模式忽略。——神飞

CSS `content` 属性和允许的值
	IE8	FF3	FF 3.5 Beta	Saf 3.2	Saf 4 Beta	Opera 9.64
:before
:after
content				支持，除了下面提到的问题	支持，除了下面提到的问题	支持，除了下面提到的问题
none	n
normal
url()	什么都不显示	什么都不显示	什么都不显示	图片丢失图标	图片丢失图标	图片丢失替代文字
string
open-quote close-quote						不能正确嵌套引号，但是包含引号。
no-open-quote no-close-quote
attr(x)
counter

counter-increment 和counter-reset CSS 属性

Counter并不能单独工作！如果你只是写 p:before {content: counter(subtitles, decimal);} ，每个段落只会在它前面有个0。为了更容易的理解这一点，让我们再来看一个实例：

脚注(footnote)
为大纲添加编号: 计算篇数、章节和段落，在每一个新的章节重新开始计算段落，并为每新的一篇重设章节编号。

使用CSS counter 语句你可以在你的页面里面定义很多个计数器，想定义多少都可以，并可以递增计数器或重设计数器。

1	`<p> 在本段中，我加入了<cite class="footnote">脚注引用。</cite></p>`

1 2	`cite.footnote {counter-increment: citations;} cite.footnote:after {content: counter(citations); vertical-align:text-top;}`

在生成的内容在，你可以引入多个计数器。比如，在法律术语中，通常在已编号的章节里面还有章节。这是可以用CSS计数器实现的。

<h1>第一个标题</h1>
<h2>章节</h2>
<p>文字....</p>
<h2>另一个章节</h2>
 
<p>文字....</p>
<h2>再一个章节</h2>
<p>文字....</p>
<h1>另一个标题</h1>
<h2>章节</h2>
<p>文字....</p>
<h2>另一个章节</h2>
 
<p>文字....</p>
<h2>再一个章节</h2>
<p>文字....</p>

在每个h1的前面添加计数器，并在每一个h1后面重设h2的计数器， CSS 可以这样写：

h1 {counter-increment: headers;counter-reset: subsections;}
h1:before {content: counter(headers, upper-roman);}
h2 {counter-increment:subsections;}
h2:before {content: counter(headers, upper-roman) "." counter(subsections, lower-roman) ":";}

现在所有的<h2>被加上了它们的标题数字和章节数字。

关于这些代码需要注意的是：请注意在h2:before 声明中我们包括了两个计数器：标题计数器和章节计数器。在每个调用中我们都定义了样式，因为样式并没有被继承。同样，我们在声明中添加了字符串。注意我们是用引号来引入字符串的，而不是用计数器，并且除了我们的内容值之外，没有相关元素。为了在同样的样式属性中联合多个计数器ID，可以使用空格将计数器ID值连在一起。

计数器的递增是通过counter-increment 声明来实现的。尽管默认的值从1开始递增，我们也可以从其它数值开始递增。你可以重设计数器。在每个标题后面重设章节的计数器看起来是比较容易接受的。要重写默认值1，并在每个<h1>元素后重设数字，CSS可以这样写：

h1 {
  counter-increment: headers 10;
  counter-reset: subsections 5;
}
h2 {
  counter-increment:subsections 2;
}

最后，请查看本文中使用的例子的演示，你可以对照演示来尝试自己做一些测试来。

作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳，就职于腾讯ISUX团队 Follow me on twitter @qianduan。

如果你喜欢本文，欢迎订阅本站以获得本站最新内容。

您或许也会喜欢:

4 个评论

谦谦君子发表于 Sep 23, 2011 at 12:48

“content 不能包含任何HTML，只能包含ASCII，也不能使用ISO 字符集。”这个有点问题吧，至少HTML是可以包含的，会原样显示。。。。

liumf2005

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS content, counter-increment 和 counter-reset详解

http://www.qianduan.net/css-content-counter-increment-counter-reset.html *****译自：CSS Content, Counter-Increment & Counter-Reset中文原文：CSS content, counter-increment 和 counter-res
复制链接

扫一扫

专栏目录