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>
复制代码

以及CSS3中的attr属性可以获取到元素属性值例如：content : attr("attr");

有一点需要注意的是：content和counter只能用在伪类那边的，平常清浮动也用到伪类的content：”“；

参考链接：

　　http://www.w3school.com.cn/cssref/pr_gen_counter-reset.asp

　　http://msdn.microsoft.com/zh-cn/library/gg721754(v=Expression.40).aspx

 

本文作者：方方和圆圆

本文链接：https://www.cnblogs.com/diligenceday/p/4062262.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   方方和圆圆  阅读(935)  评论(0)  编辑  收藏  举报

再过一百年， 我会在哪里？

💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
➖
收起
点击右上角即可分享
微信分享提示
SQL AI 助手