教你使用 CSS 计数器 (#3263)
* Update using-css-counters.md * Update using-css-counters.md * Update using-css-counters.md * Update using-css-counters.md * Update using-css-counters.md * Update using-css-counters.md
This commit is contained in:
Herylee
+32
-34
@@ -2,69 +2,67 @@
|
||||
> * 原文作者：[Adam Laki](https://pineco.de/author/laki/)
|
||||
> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
|
||||
> * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/using-css-counters.md](https://github.com/xitu/gold-miner/blob/master/TODO/using-css-counters.md)
|
||||
> * 译者：
|
||||
> * 校对者：
|
||||
> * 译者：[sakila1012](https://github.com/sakila1012)
|
||||
> * 校对者：[snowyyu](https://github.com/snowyyu)，[ryouaki](https://github.com/ryouaki)
|
||||
|
||||
# Using CSS Counters
|
||||
# 教你使用 CSS 计数器
|
||||
|
||||
**The CSS counters are variables which we can increment or decrement with the specific property. With the help of it, we can achieve some generic iteration like in a programming language.**
|
||||
**CSS 计数器是我们可以用特定属性递增或递减的变量。有了它，我们就可以像在编程语言里面一样，实现一些普通的迭代。**
|
||||
|
||||
This method can be used for some creative solution which includes a counter for some repeating part of your code.
|
||||
这种方法可以用于一些创造性的解决方案，其中包括代码中一些重复部分的计数。
|
||||
|
||||
To control your counters you need the `counter-reset` and `counter-increment` property and also the `counter()` and `counters()` function pair. This methodology not worth anything without the counter display, for that we can use the simplified content property.
|
||||
为了控制你的计数器，你需要 `counter-increment` 和 `counter-increment` 属性，以及 `counter()` 和 `counters()` 函数。显示不出数值的话这些方法根本没啥用，所以我们要搭配简单的 content 属性。
|
||||
|
||||
The behavior is simple. You have an unordered list, and you want to count your li items. You specify a new counter on the ul element, and you increment it on the li elements.
|
||||
特性很简单。比如你有一个无序的列表，你想要计数 li 的项，则需要在 ul 上声明一个计数器，然后就可以在其下的 li 增加它的数值了。
|
||||
|
||||
## counter-reset property
|
||||
## counter-reset 属性
|
||||
|
||||
We can define our counter variable with the `counter-reset` property; for this, we have to give any name and optionally a start value. The default start data is zero. This property goes to the wrapper element.
|
||||
我们可以用 `counter-reset` 属性来定义我们的计数器变量；为此，我们必须给出任意的名字和可选的开始值。默认的开始值是 0。这个属性是包装器元素。
|
||||
|
||||
## counter-increment property
|
||||
## counter-increment 属性
|
||||
|
||||
With the use of the `counter-increment` property, we can increase or decrease our counter value. This property also has an optional second value which specifies the increment/decrement volume.
|
||||
运用 `counter-increment` 属性，我们可以递增或者递减计数器的值。该属性还有一个可选的值，用于指定递增/递减量。
|
||||
|
||||
## counter() function
|
||||
## counter() 函数
|
||||
|
||||
The `counter()` function is responsible for the dump. The place of the dump is the content property because this is where you can give back data to your HTML through CSS. The function has two parameters; the first is the name of the counter variable and the second is the [counter type](https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style) (optional).
|
||||
`counter()` 函数负责转储。转储的位置是内容属性，因为这是您可以通过 CSS 将数据返回给 HTML 的地方。该函数有两个参数，第一个参数是计数器变量名，第二参数是[计数器类型](https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style)(可选)。
|
||||
|
||||
**Note:** in CSS there aren’t any concatenation operator so if you want to connect two value in the content property merely use space.
|
||||
**注意：** 在CSS中没有任何连接运算符，所以如果你想连接内容属性中的两个值只能使用空格。
|
||||
|
||||
## counters() function
|
||||
## counters() 函数
|
||||
|
||||
This function does the same job as the `counter()` function. The main difference is that with the `counters()` you can embed the counter iterations to another like in a multi-level ul list. It has three parameters, the first is the name of the counter, the second is the separator, and the third is the counter type (optional).
|
||||
这个函数跟 `counter()`函数实现同样的功能。主要区别在于用 `counter()` 你可以像嵌套ul一样把一个计数器插入到另一个。它有三个参数，第一个是计数器名称，第二个是分隔符，第三个是计数器类型（可选）。
|
||||
|
||||
## Use Case #1 – Automatic Documentation Issue Tracking
|
||||
## 使用场景 #1 - 自动追踪文档条目
|
||||
当你需要处理一些重复元素的时候，并且你同样想统计他们的数量，那么这个方案会很好用。。
|
||||
|
||||
This solution can be handy when you have some repetitive element, and you also want to count them.
|
||||
我们在我们的 `.container` 包裹元素创建一个 `counter-reset`。创建后，我们为具有**问题类名**的项目设置一个 `counter-increment`。最后，我们用`.issues：before` 条目的内容属性显示出计数器的值。
|
||||
|
||||
We create a `counter-reset` on our `.container` wrapper element. After this, we set a `counter-increment` for the items with **issues class name**. In the end, we write out the value of the counter with the help of the content property on the `.issues:before` items.
|
||||
详见 Adam Laki ([@adamlaki](https://codepen.io/adamlaki)) on [CodePen](https://codepen.io) 的[ CSS 计数器案例](https://codepen.io/adamlaki/pen/RrKBpJ/) 文章。
|
||||
|
||||
See the Pen [CSS Counter Example](https://codepen.io/adamlaki/pen/RrKBpJ/) by Adam Laki ([@adamlaki](https://codepen.io/adamlaki)) on [CodePen](https://codepen.io).
|
||||
## 使用场景 #2 - 嵌套列表
|
||||
|
||||
## Use Case #2 – Nested Lists
|
||||
使用 `counters()` 函数，我们可以像在文本编辑器程序那样制作嵌套列表计数器。
|
||||
|
||||
Using the `counters()` function, we can make nested list counter as we do in our text editor program.
|
||||
详见 Adam Laki ([@adamlaki](https://codepen.io/adamlaki)) on [CodePen](https://codepen.io) 的[嵌套计数器](https://codepen.io/adamlaki/pen/a1907874b8b6eb2395cf0af7742e8f9d/)文章。
|
||||
|
||||
See the Pen [Nesting Counters](https://codepen.io/adamlaki/pen/a1907874b8b6eb2395cf0af7742e8f9d/) by Adam Laki ([@adamlaki](https://codepen.io/adamlaki)) on [CodePen](https://codepen.io).
|
||||
## 使用场景 #3 - 计算已经勾选的复选框
|
||||
|
||||
## Use Case #3 – Counting Checked Checkboxes
|
||||
使用输入框的：checked 伪类，我们可以检查复选框是否被选中，选中的话，我们计数器的数值就会增加。
|
||||
|
||||
Using the input fields `:checked` pseudo-class value we can check if a checkbox is checked and if so we can increment our counter.
|
||||
详见 Adam Laki ([@adamlaki](https://codepen.io/adamlaki)) on [CodePen](https://codepen.io) 的[复选框计数器](https://codepen.io/adamlaki/pen/RrKBpJ/) 文章。
|
||||
|
||||
See the Pen [Checkbox Counter](https://codepen.io/adamlaki/pen/f1ce9eef0a19069b883da8ec855e4b71/) by Adam Laki ([@adamlaki](https://codepen.io/adamlaki)) on [CodePen](https://codepen.io).
|
||||
## 视频总结
|
||||
|
||||
## Summary in a Video
|
||||
|
||||
[Steve Griffith](https://www.youtube.com/channel/UCTBGXCJHORQjivtgtMsmkAQ) made an excellent and informative overall video on this topic. It is covering almost everything you need to know about CSS counters.
|
||||
[Steve Griffith](https://www.youtube.com/channel/UCTBGXCJHORQjivtgtMsmkAQ) 就这个话题做了一个很好的和内容丰富的整套视频。它涵盖了几乎所有你需要了解的 CSS 计数器。
|
||||
|
||||
<iframe width="911" height="537" src="https://www.youtube.com/embed/TJR7qGCOjTk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
|
||||
|
||||
## Other Use Case(s)
|
||||
|
||||
1. Šime Vidas posted a [great example with footnotes](https://codepen.io/simevidas/pen/xpbLmV?editors=0100).
|
||||
2. Sam Dutton made an [interesting line numbering example](https://codepen.io/samdutton/pen/xpGxbY).
|
||||
3. Gaël use this feature on a complex level [in his project named a11y.css](http://ffoodd.github.io/a11y.css/errors.html).
|
||||
## 其他使用案例
|
||||
|
||||
1. Šime Vidas 发布了一个 [注释很好的示例](https://codepen.io/simevidas/pen/xpbLmV?editors=0100)。
|
||||
2. Sam Dutton 做了一个[有趣的在线计数示例](https://codepen.io/samdutton/pen/xpGxbY)。
|
||||
3. Gaël 在复杂的层面上[为他的名为 a11y.css 的项目](http://ffoodd.github.io/a11y.css/errors.html)使用了这个特性。
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user