CSS content, 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 属性

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

content属性概述

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

<ul id="showlinkafterlink">
 <li><a href="http://www.qianduan.net">前端观察</a></li>
 <li><a href=http://www.aspxhome.com>asp之家</a></li>
 <li><a href=http://www.cidianwang.com>词典网</a></li>
</ul>

例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 伪元素一起使用来在一个文档内生产内容。