使用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：圖像標題
_ _
| Ø|
存有LOREM
存有LOREM
圖像2：另一個圖像標題
_
| \ |
第1節：另一部分的標題
存有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) ': '; }