CSS3计数器Counter_用CSS计算选中的复选框有几个
2018-06-12 13:18:09  By: dwtedx

很早之前,计数器仅存在于ul,ol等元素中,如何想给其他元素增加计数,就只能通过list-style-image,或者background-image来实现。不过现在css3增加了counter属性,可以实现任何元素的计数作用。不过这个counter属性还需要配合其他css属性一起才能有效果。


css计数器

counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。

counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

counter()插入计数器


完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=´UTF-8´>
    <title>计数</title>
    <style type="text/css">
    body{
        counter-reset: fruit;

    }
    input:checked{
        counter-increment:fruit;
    }
    .total:after{
        content:counter(fruit);
    }
    </style>
</head>
<body>
    <input type="checkbox" name=´fruit´>水果
    <input type="checkbox" name=´fruit´>水果
    <input type="checkbox" name=´fruit´>水果
    <input type="checkbox" name=´fruit´>水果
    <input type="checkbox" name=´fruit´>水果
    <input type="checkbox" name=´fruit´>水果
    <input type="checkbox" name=´fruit´>水果
    <input type="checkbox" name=´fruit´>水果
    <input type="checkbox" name=´fruit´>水果
    <p class=´total´></p>
</body>
</html>


若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

DD记账
top
+