css3 计数器_带CSS计数器的点编号列表

css3 计数器

The biggest challenge in ordered lists is creating point-numbered presentations, as you might see in an extensive contract or other legal document, using numbers like 5.1 and 3.7. To gain these while retaining an ordered list structure, we must turn to CSS counters.

有序列表中的最大挑战是使用编号5.1和3.7创建点编号的演示文稿，就像您在广泛的合同或其他法律文件中可能看到的那样。 要在保留有序列表结构的同时获得这些，我们必须转向CSS counters 。

Let’s say you want to want to have a series of ordered lists starting with 1.1. First, we must create the correct HTML markup. (I’m using HTML5 shortcuts to save on space).

假设您要拥有一系列从1.1开始的有序列表。 首先，我们必须创建正确HTML标记。 (我使用HTML5快捷方式来节省空间)。

<h2>Legalese</h2>
<ol>
	<li>Flibbert
		<ol>
			<li>Flibberme
			<li>Giblet
		</ol>
	<li>Me Giblets
		<ol>
			<li>Beep
			<li>Bop
			<li>Boop
		</ol>
</ol>

The easiest way to understand CSS counters system is that they act like an odometer that is incremented by encountering specified elements.

理解CSS counters系统的最简单方法是，它们的作用就像里程表一样，通过遇到指定的元素而增加。

First, we set up the ordered list to not show list item numbers:

首先，我们将排序列表设置为不显示列表项目编号：

ol {
		list-style-type: none;
}

Then set up the first counter “odometer” to restart whenever an <ol> element is encountered:

然后将第一个计数器“里程表”设置为在遇到<ol>元素时重新启动：

ol {
	counter-reset: section;
}

The odometer will increment with every list item:

里程表会随着每个列表项的增加而增加：

li {
	counter-increment: section;
}

And before every (undecorated) list item, create some generated content that includes the current section count:

在每个(未修饰的)列表项之前，创建一些包含当前节计数的生成内容：

li:before {
	content: counters(section, ".") " "; 
}

The result:

结果：

法文 (Legalese)

1. 1. Flibberme
      Flibberme
   2. Giblet
      Giblet
2. 1. Beep
      嘟
   2. Bop
      波普
   3. Boop
      oop

Decorating Lists With Images

Creating Decorated Ordered Lists With CSS

用图像 装饰列表用CSS创建装饰的有序列表

rel="stylesheet" href="/styles/print-min.css"> rel="stylesheet" href="/styles/print-min.css">

翻译自: https://thenewcode.com/752/Point-Numbered-Lists-With-CSS-Counters

css3 计数器