CSS 伪类/伪元素 + CSS计数器

1. CSS伪类

• CSS伪类分为两类：状态性和结构性；

（1）状态性伪类根据当前元素状态进行选择。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

状态性伪类	作用
:link	应用于未被访问过的链接；
:hover	应用于鼠标悬停到的元素；
:active	应用于被激活的元素；
:visited	应用于被访问过的链接，与:link互斥。
:focus	应用于拥有键盘输入焦点的元素。

（2）结构性伪类是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素。
我在知道这类选择器之前，写导航的最后一个元素的特殊样式时，都要定义一个last类名来定义样式，而应用这类伪类选择器简化了文档结构并且灵活性更好。

结构性伪类	作用
:first-child	选择某个元素的第一个子元素；
:last-child	选择某个元素的最后一个子元素；
:nth-child()	选择某个元素的一个或多个特定的子元素；
:nth-last-child()	选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()	选择指定的元素；
:nth-last-of-type()	选择指定的元素，
:first-of-type	选择一个上级元素下的第一个同类子元素；
:last-of-type	选择一个上级元素的最后一个同类子元素；
:only-child	选择一个是它的父元素的唯一一个子元素的元素；
:only-of-type	选择一个是它的上级元素的唯一一个相同类型的子元素的元素；
:empty	选择里面没有任何内容的元素。

2. CSS伪元素

伪元素是对元素中的特定内容进行操作，而不是描述状态。它控制的内容和元素是相同的，但它本身并不存在于文档结构中！常见的伪元素选择器包括：

常见伪元素	作用
:first-letter	选择元素文本的第一个字或字母。
:first-line	选择元素文本的第一行。
:before	在元素内容的最前面添加新内容。
:after	在元素内容的最后面添加新内容。

• 在CSS3中，大多数浏览器兼容用::(双冒号)表示伪元素，在CSS2中已经有的伪元素，用单冒号或者双冒号都可以。但是，要是需要兼容IE，则最好都用单冒号。

3. CSS伪元素:before/:after + CSS计数器的应用

（1）计数器介绍

• counter-reset:[ ? ]+ | none | inherit
  默认值为none。
  第一个参数用来定义计数器的名称，但不可以是CSS关键字例如none；
  第二个参数用来定义计数器开始计数的起始值，默认为0（则计数从1开始）。
  该属性的主要功能是标识计数器作用域，而且此值必须作用于选择器上，并且不可缺少。

• counter-increment:[ ? ]+ | none | inherit
  默认值为none。
  第一个参数表示要调用的计数器的名称，就是在counter-reset里定义的那些；
  第二个参数指定计数起始值。其值允许是0或者负整数值，如果未指定任何值，则该值为1（前提是counter-reset未显式设置计数的起始值）。其值递增是按倍数值递增，如果设置了值为2,后面元素递增值为4、6、8，依此类推。为负值时表示递减。

• counter()
  用来调用定义的计数器，接受两个参数，中间用 , 分隔。
  第一个参数就是之前定义的计数器名。
  第二个参数用来定义计数的样式，同列表的list-style。（包括：disc，circle，square，decimal，decimal-leading-zero，lower-roman，upper-roman，lower-greek， lower-latin，upper-latin，armenian，georgian， lower-alpha， upper-alpha，none， inherit）

（2）计数器在:before/:after中的使用

• :before/:after中有一个特殊的属性：content。除了chrome浏览器所有元素都支持content属性外，其他浏览器都只有:before/:after伪类中有这个属性。

• content属性用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。

实现计数器：

效果图：

效果图

代码：

    
    
    


    

        

            a
            b
            c
            d
            e
            f
            g
            h
            i
            j
        
        
我选择了个字母
        

            
HTML tutorials
            
HTML Tutorial
            
XHTML Tutorial
            
CSS Tutorial

            
Scripting tutorials
            
JavaScript
            
VBScript

            
XML tutorials
            
XML
            
XSL
        
    

据自己在写代码的过程中得到的一些体验来讲，在要设置counter-increment属性的选择器里一定要包含设置了counter-reset属性的元素作为选择器的一部分。