【原文】http://www.zhangxinxu.com/wordpress/2014/12/css-counters-pseudo-class-checked-numbers/

一、CSS计数器为哪样?

要想理解本文内容,你需要首先了解什么是CSS计数器,您可以查看前不久我写的文章“CSS计数器(序列数字字符自动递增)详解”,相当地详尽与深入。

下面的动态行为全部由HTML与CSS触发,没有任何JavaScript的参与,不过使用诸多CSS3功能,因此只在现代浏览器中有效果。OK,放下手中的工作,一起来感受下CSS的潜力吧~

二、CSS计数器与动态计数呈现

您可以狠狠地点击这里:使用CSS计数器动态获得选中元素个数demo

demo中的复选框,你选中几个,就是告诉你对应选中的个数,如下截图,本人土鳖,只吃过3种:

CSS代码很简单,如下:

body {
counter-reset: icecream;
}
input:checked {
counter-increment: icecream;
}
.total::after {
content: counter(icecream);
}

解释下就是,有个全局计数器icecream,每有一个复选框选中,计数值就会加1.total就是呈现选中个数的那个标签,其任务很简单,呈现当前计数器值就可以了。

三、CSS计数器与数值计算小游戏

您可以狠狠地点击这里:CSS计数器实现数值计算小游戏demo

默认进入看到是这样样子:

选择对应的计算值后面就会呈现对应的结果:

当最后计算的值是72时候,就会反馈你成功了!

其实现主要借助CSS3选择器以及CSS计数器以及单复选框伪类技术

CSS核心代码如下:

body {
counter-reset: sum;
} input {
position: absolute;
clip: rect(0 0 0 0);
} #number1:checked { counter-increment: sum 64; }
#number2:checked { counter-increment: sum 16; }
#number3:checked { counter-increment: sum -32; }
#number4:checked { counter-increment: sum 128; }
#number5:checked { counter-increment: sum 4; }
#number6:checked { counter-increment: sum -8; } .sum::before {
content: '= ' counter(sum);
} #number1:checked ~
#number2:checked ~
#number3:not(:checked) ~
#number4:not(:checked) ~
#number5:not(:checked) ~
#number6:checked ~
.sum::after {
content: ' (万岁!)';
}

其实原理跟上面的计算选中个数是一样的,不过这里呢,每个复选框计数值这里都是具体值(不是默认的1),最后,通过相邻兄弟选择器以及:checked状态判断最后结果是不是72,还是挺巧妙的。

大家有兴趣可以多多斟酌斟酌。

参考文章

大热书籍《CSS世界》签名版限量独家发售,显示我的专属购买码

(本篇完)

小tip:CSS计数器+伪类实现数值动态计算与呈现【转】的更多相关文章

  1. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  2. CSS :first-child 伪类

    CSS :first-child 伪类  向元素的第一个子元素添加样式,示例如下:   例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type=&quo ...

  3. CSS :focus 伪类

    :focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式 语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字 ...

  4. 二.CSS的伪类

    CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用"  : "进行标示,如果是“ ::  ” 表示CS ...

  5. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  6. 关于css的伪类和伪元素

    现在才发现自己一直没有分清楚css的伪类和伪元素啊,so,总结一下. CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相 ...

  7. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭

    小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...

  8. CSS锚伪类顺序需注意的几点

    CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...

  9. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

随机推荐

  1. charles安装破解步骤

    访问该地址https://www.zzzmode.com/mytools/charles/ 安装——生成破解工具charles.jar——替换

  2. css的引用关系

    总结:离div标签越近,越先被引用 先在同级目录下新建一个stylesheet(是以.css结尾的)注意:link引入进来的css中,class标签也是c1,因为html中div class=c1,因 ...

  3. [极客大挑战 2019]Havefun wp

    很少见的很简单的一道题 查看源代码 获得一段被注释的代码 直接?cat=dog即可得flag

  4. 吴恩达《深度学习》-第五门课 序列模型(Sequence Models)-第一周 循环序列模型(Recurrent Neural Networks) -课程笔记

    第一周 循环序列模型(Recurrent Neural Networks) 1.1 为什么选择序列模型?(Why Sequence Models?) 1.2 数学符号(Notation) 这个输入数据 ...

  5. xml的复习

    xml的复习 1.概念:可扩展标记语言 2.功能: *存储数据    1.配置文件     2.在网络中传播 3.xml与html区别: xml语法严格,HTML语法松散 xml存储数据,HTML展示 ...

  6. Spring学习(二)--Spring的IOC

    1.依赖反转模式 依赖反转:高层次的模块不应该依赖于低层次的模块,两者都应该依赖于抽象接口.抽象接口不应该依赖于具体实现.而具体实现则应该依赖于抽象接口. 在面向对象编程领域中,依赖反转原则(Depe ...

  7. STM32CubeMX HAL库串口: 使用DMA数据发送、使用DMA不定长度数据接收

    转载自 https://blog.csdn.net/euxnijuoh/article/details/81638676

  8. .net Winform 揭开语音识别的神秘面纱

    今天老哥弄上位机,了解到一个有意思的东西,就是语音识别,真的很简单,话不多话,一起看图吧 1. 初始 Winform 界面设计: 2.潦潦几句代码书写着我的理解: 2-1. 先看引用  dll usi ...

  9. kubernetes1.15极速部署prometheus和grafana

    关于prometheus和grafana prometheus负责监控数据采集,grafana负责展示,下图来自官网: 环境信息 硬件:三台CentOS 7.7服务器 kubernetes:1.15 ...

  10. sort函数居然能改变元素值?记一次有趣的Bug——四数之和

    坐标leetcode: 我想都不想直接深度优先搜索暴力求解: class Solution { public: vector<vector<int>> res; //答案 in ...