css 实现计数器_CSS计数器

css 实现计数器

Counters.  They were a staple of the Geocities / early web scene that many of us "older" developers grew up with;  a feature then, the butt of web jokes now.  CSS has implemented its own type of counter, one more sane and straight-forward than the ole "hit counter."  CSS counters allow for simple CSS-based incrementing and display of a number for generated content.  Let's have a quick look at how CSS counters work!

柜台。 它们是Geocities /早期Web场景的主要组成部分，我们许多“较老的”开发人员都是从中成长的。 然后是一个功能，现在网络笑话了。 CSS已经实现了自己的计数器类型，比起“命中计数器”更加理智而直接。 CSS计数器允许基于CSS的简单递增和显示生成内容的数字。 让我们快速看一下CSS计数器的工作方式！

View Demo 观看演示

初始化CSS计数器 (Initializing the CSS Counter)

For the sake of semantics, let's displays a series of slides using <OL> and <LI> elements for our counter example.  The first step is resetting the counter, providing the specific counter a name initializing it to 0:

出于语义的考虑，让我们在反例中显示使用<OL>和<LI>元素的一系列幻灯片。 第一步是重置计数器，为特定的计数器提供一个将其初始化为0的名称：

ol.slides {
	counter-reset: slideNum;
}

The counter name slideNum will be used throughout the example.

在整个示例中将使用计数器名称slideNum 。

递增CSS计数器 (Incrementing the CSS Counter)

To increment the counter, use the counter-increment property and the counter name created in the first step:

要增加计数器，请使用counter-increment属性和第一步中创建的计数器名称：

ol.slides > li {
	counter-increment: slideNum;
}

Each counter-increment call continues to increment the counter.  Be aware that you must use > in your selector if you have nested lists so that your list numbering doesn't get incremented at the wrong points.

每个计数器增加调用都会继续增加计数器。 请注意，如果您有嵌套列表，则必须在选择器中使用> ，以免列表编号在错误的位置递增。

使用对价 (Using the Counter Value)

Counters aren't much good if you can't display them (just like in 1995!), so the counter() command will output the counter value when used with the content property:

如果您无法显示计数器，计数器的效果不是很好(就像1995年一样！)，因此counter()命令与content属性一起使用时将输出计数器值：

ol.slides li:after {
	content: "[" counter(slideNum) "]";
}

Oddly enough, counters can also be nested by using a second argument to counter, which will act as a separater:

奇怪的是，还可以通过使用第二个参数counter来嵌套计数器，该参数将用作分隔符：

/* assume this HTML:

<ol class="toc">
	<li>Intro</li>
	<li>Topic
		<ol>
			<li>Subtopic</li>
			<li>Subtopic</li>
			<li>Subtopic</li>
		</ol>
	</li>
	<li>Topic
		<ol>
			<li>Subtopic</li>
			<li>Subtopic</li>
			<li>Subtopic</li>
		</ol>
	</li>
	<li>Closing</li>		
</ol>
*/

ol.toc, ol.toc ol {
	counter-reset: toc;
}
ol li {
	counter-increment: toc;
}
.toc li:before {
	content: "(Item " counters(toc, ".") ")";
}

/* visible page "output"

<ol class="toc">
	<li>(Item 1)Intro</li>
	<li>(Item 2)Topic
		<ol>
			<li>(Item 2.1)Subtopic</li>
			<li>(Item 2.2)Subtopic</li>
			<li>(Item 2.3)Subtopic</li>
		</ol>
	</li>
	<li>(Item 3)Topic
		<ol>
			<li>(Item 3.1)Subtopic</li>
			<li>(Item 3.2)Subtopic</li>
			<li>(Item 3.3)Subtopic</li>
		</ol>
	</li>
	<li>(Item 4)Closing</li>		
</ol>
*/

As you can probably tell, counters could be incredibly helpful when it comes to basic count display up to a table of contents display.

您可能会说，从基本计数显示到目录显示，计数器可能会非常有用。

View Demo 观看演示

After you get over the initial giggle of the the word counter, you start to realize that they can be quite useful.  In most cases, you'll use counters with :after and :before pseudo-elements, unless you dedicate empty elements to their contents.  I've seen counters used in broadcast slides, slideshows, and documentation.  Do you use counters for anything else?

克服单词计数器的最初笑声之后，您开始意识到它们可能非常有用。 在大多数情况下，除非将空元素专用于它们的内容，否则您将使用带有：after和：before伪元素的计数器。 我看过广播幻灯片，幻灯片和文档中使用的计数器。 您还使用计数器吗？

翻译自: https://davidwalsh.name/css-counters

css 实现计数器