使用CSS的数字和部分的多个计数器

Question

是否可以在html文件中为单独的类实现多个计数器？据我所知，我只能算一件事，而且太过于原始。

举个例子，是否可以让以下代码......

HTML：

<div class="section">section title</div>
ipsum lorem
<span class="image">image title</span>
<img src="example.com/img.jpg">
ipsum lorem
ipsum lorem
<span class="image">another image title</span>
<img src="example.com/another_img.jpg">
<div class="section">another section title</div>
ipsum lorem
<span class="image">yet another image title</span>
<img src="example.com/yet_another_img.jpg">

...自动计算数字，部分（或可能更多的东西）的数量，并在页面上显示如下：

第1节：章节标题
ipsum lorem
图1：图像标题
 _ _
| o |
ipsum lorem
ipsum lorem
图2：另一个图像标题
 _ _
| \ |
第1节：另一节标题
ipsum lorem
图3：又一个图像标题
 _ _
| [] |

Answer 1

尝试类似：

.section { counter-increment: section-counter; }
.section:before { content: 'Section ' counter(section-counter) ': '; }

.image { counter-increment: image-counter; }
.image:before { content: 'Image ' counter(image-counter) ': '; }