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

译自: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特性了,所以,我想是时候好好研究一下它们了。

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

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

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

    content属性概述

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

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

    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 | | url | open-quote | close-quote | no-open-quote | no-close-quote | attr(attribute) | counter(name[, style])

    这些值的解释如下:

    content: none;

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

    content: normal;

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

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

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

    content: url(myBullet.gif);

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

    content: open-quote;

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

    content: no-open-quote;

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

    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; }

    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 属性和允许的值
     IE8FF3FF 3.5 BetaSaf 3.2Saf 4 BetaOpera 9.64 
    :before       
    :after       
    content   支持,除了下面提到的问题支持,除了下面提到的问题支持,除了下面提到的问题 
    nonen      
    normal       
    url()什么都不显示什么都不显示什么都不显示图片丢失图标图片丢失图标图片丢失替代文字 
    string       
    open-quote close-quote     不能正确嵌套引号,但是包含引号。 
    **no-open-quote** **no-close-quote**       
    attr(x)       
    counter       

    counter-incrementcounter-reset CSS 属性

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

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

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

    在本段中,我加入了脚注引用。

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

    在我们上面的例子中,我们想在每个<cite class="footnote">上增加计数器,然后在:after伪元素上用content属性添加脚注的数字:诡异的是,这在浏览器中并不能工作。你能发现我的错误吗?为了使用一个计数器(counter),你应该提供一个名字(name)。在上面的情景中,这个名字就是”citations”。 当然你也可以指定样式。如果未定义样式,样式就会默认为数字。这些值可以包括所有的list-style-type 值,尽管只有

      值懂得一个计数器。这些值包括decimal | decimal-leading-zero | lower-alpha | lower-greek | lower-roman | upper-alpha | upper-roman | lower-latin | upper-latin | hebrew | georgian 等等。

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

      第一个标题

      章节

      文字....

      另一个章节

      文字....

      再一个章节

      文字....

      另一个标题

      章节

      文字....

      另一个章节

      文字....

      再一个章节

      文字....

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

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

      元素后重设数字,CSS可以这样写:

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

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