CSS计数器与动态计数呈现
2016-08-04 15:32
351 查看
代码: CSS代码: body { counter-reset: icecream; } input:checked { counter-increment: icecream; } .total::after { content: counter(icecream); } HTML代码: <strong>下面中国十大冰淇淋你吃过几个?</strong> <ol> <li><input type="checkbox" id="icecream1"><label for="icecream1">哈根达斯</label></li> <li><input type="checkbox" id="icecream2"><label for="icecream2">和路雪wall's</label></li> <li><input type="checkbox" id="icecream3"><label for="icecream3">八喜冰淇淋</label></li> <li><input type="checkbox" id="icecream4"><label for="icecream4">DQ冰淇淋</label></li> <li><input type="checkbox" id="icecream5"><label for="icecream5">蒙牛冰淇淋</label></li> <li><input type="checkbox" id="icecream6"><label for="icecream6">雀巢冰淇淋</label></li> <li><input type="checkbox" id="icecream7"><label for="icecream7">伊利冰淇淋</label></li> <li><input type="checkbox" id="icecream8"><label for="icecream8">乐可可冰淇淋</label></li> <li><input type="checkbox" id="icecream9"><label for="icecream9">新城市冰淇淋</label></li> <li><input type="checkbox" id="icecream10"><label for="icecream10">明治MEIJI</label></li> </ol> 你总共选择了 <strong class="total"></strong> 款冰淇淋!
详细讲解地址:http://www.zhangxinxu.com/wordpress/2014/12/css-counters-pseudo-class-checked-numbers/
相关文章推荐
- 小tip:CSS计数器+伪类实现数值动态计算与呈现
- 动态创建全局Css
- 使用css实现动态下划线效果
- JS实现动态加载CSS和JS文件
- css 动态美观显示列表中记录的审批状态
- BOM编程-动态脚本,css,table
- 页面引入动态获取到的css和js链接地址
- asp.net中动态变更CSS
- css 打造动态动态按妞。
- 动态WEB入门 CSS+Div
- js根据浏览器动态修改修改css
- 动态修改css文件中,具体的class中的个别属性值。
- 用javascript动态加载不同css/js文件
- JavaScript_动态加载CSS和JS文件
- css计数器详解
- 爬取动态网站数据(soup的css方式处理数据)
- 动态加载JS和CSS
- JS动态调用CSS文件
- 动态调用CSS文件的JS代码
- 设计一个计算器类Claculator,它只有一个用于计数的数据成员count。该计算器的有效计数范围是0~65535,实现计数器的前自增、后自增、前自减、后自减、两个计算器相加减运算