<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>CSS_counter</title>

<style>

body{

    /*

        需要一个变量 或者第二个参数一个初始值，第二个参数可以不要，默认是从1开始的，(这不科学)

    */

    counter-reset : test 100;

}

div.num:after{

    /*如果不把这个元素设置成伪类;是没有效果的;*/

    counter-increment : test;

    /*这里利用了另一个CSS3的属性content*/

    content : counter(test);

    height : 40px;

}

div.num:before{

    /*CSS3的content属性*/

    content : "this is before preFix"

}

div.content{

    /*WARN : 这个content属性是无效的;*/

    content : "noContent";

}

</style>

</head>

<body>

    <dl>

        <dt>知识点1：</dt>

        <dd>CSS3中的content属性</dd>

        <dt>知识点2：</dt>

        <dd>CSS3中的counter-reset和counter-increment属性</dd>

    </dl>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="num"></div>

    <div class="content"></div>

</body>

</html>