CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了-CFANZ编程社区

CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了

HTML的代码

<!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>