-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
教你使用 CSS 计数器 #10
Labels
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
教你使用 CSS 计数器
CSS 计数器是我们可以用特定属性递增或递减的变量。有了它,我们就可以像在编程语言里面一样,实现一些普通的迭代。
这种方法可以用于一些创造性的解决方案,其中包括代码中一些重复部分的计数。
为了控制你的计数器,你需要
counter-increment
和counter-increment
属性,以及counter()
和counters()
函数。显示不出数值的话这些方法根本没啥用,所以我们要搭配简单的 content 属性。特性很简单。比如你有一个无序的列表,你想要计数 li 的项,则需要在 ul 上声明一个计数器,然后就可以在其下的 li 增加它的数值了。
counter-reset 属性
我们可以用
counter-reset
属性来定义我们的计数器变量;为此,我们必须给出任意的名字和可选的开始值。默认的开始值是 0。这个属性是包装器元素。counter-increment 属性
运用
counter-increment
属性,我们可以递增或者递减计数器的值。该属性还有一个可选的值,用于指定递增/递减量。counter() 函数
counter()
函数负责转储。转储的位置是内容属性,因为这是您可以通过 CSS 将数据返回给 HTML 的地方。该函数有两个参数,第一个参数是计数器变量名,第二参数是计数器类型(可选)。注意: 在CSS中没有任何连接运算符,所以如果你想连接内容属性中的两个值只能使用空格。
counters() 函数
这个函数跟
counter()
函数实现同样的功能。主要区别在于用counter()
你可以像嵌套ul一样把一个计数器插入到另一个。它有三个参数,第一个是计数器名称,第二个是分隔符,第三个是计数器类型(可选)。使用场景 #1 - 自动追踪文档条目
当你需要处理一些重复元素的时候,并且你同样想统计他们的数量,那么这个方案会很好用。。
我们在我们的
.container
包裹元素创建一个counter-reset
。创建后,我们为具有问题类名的项目设置一个counter-increment
。最后,我们用.issues:before
条目的内容属性显示出计数器的值。详见 Adam Laki (@adamlaki) on CodePen 的 CSS 计数器案例 文章。
使用场景 #2 - 嵌套列表
使用
counters()
函数,我们可以像在文本编辑器程序那样制作嵌套列表计数器。详见 Adam Laki (@adamlaki) on CodePen 的嵌套计数器文章。
使用场景 #3 - 计算已经勾选的复选框
使用输入框的:checked 伪类,我们可以检查复选框是否被选中,选中的话,我们计数器的数值就会增加。
详见 Adam Laki (@adamlaki) on CodePen 的复选框计数器 文章。
视频总结
Steve Griffith 就这个话题做了一个很好的和内容丰富的整套视频。它涵盖了几乎所有你需要了解的 CSS 计数器。
<iframe width="911" height="537" src="https://www.youtube.com/embed/TJR7qGCOjTk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>其他使用案例
The text was updated successfully, but these errors were encountered: