Больше счетчиков в CSS

Question

У меня проблема с счетчиками CSS.

Я установил два счетчика: один указатель headings и другие индексы images. Однако только один работает правильно, другой (для изображений) показывает только номер 1 во всех описаниях изображений. Вы можете увидеть пример here

body { 
 
    counter-reset: figcounter; 
 
    counter-reset: head2counter; 
 
} 
 
.fig:before { 
 
    counter-increment: figcounter; 
 
    content: "Fig. " counter(figcounter)": "; 
 
    font-weight: bold; 
 
} 
 
.figreset { 
 
    counter-reset: figcounter; 
 
} 
 
.head2:before { 
 
    counter-increment: head2counter; 
 
    content: counter(head2counter)" "; 
 
} 
 
.head2reset { 
 
    counter-reset: head2counter; 
 
}

<h1>Article title</h1> 
 
<h2 class="head2">Services</h2> 
 
<img src="http://www.google.com/about/company/images/company-products.png" width="200" /> 
 
<span class="fig">Google services</span> 
 
<h2 class="head2">E-mail clients</h2> 
 
<h2 class="head2">Others</h2> 
 
<img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png" width="200" /> 
 
<span class="fig">Google logo</span> 
 
<br /> 
 
<img src="http://thenextweb.com/wp-content/blogs.dir/1/files/2013/02/google_chrome.png" width="200" /> 
 
<span class="fig">Chrome</span>

Вы знаете, как это исправить? Если есть только один счетчик, он работает правильно. Я хочу индексировать изображения независимо на headings.

Answer 1

Изменение от:

body { 
     counter-reset: figcounter; 
     counter-reset: head2counter; 
} 

To:

body { 
    counter-reset: figcounter head2counter; 
} 

Почему?

Потому что counter-reset и counter-increment могут быть переопределены. Так что, если вам нужно использовать counter-reset и counter-increment для более 1 переменной счетчика элементов, вам нужно поместить их в ту же декларацию для counter-reset и counter-increment с пространством, разделяющим их. В этом случае вам нужно только поставить counter-reset свойству

---

body { 
 
    counter-reset: figcounter head2counter; 
 
} 
 
.fig:before { 
 
    counter-increment: figcounter; 
 
    content: "Fig. " counter(figcounter)": "; 
 
    font-weight: bold; 
 
} 
 
.figreset { 
 
    counter-reset: figcounter; 
 
} 
 
.head2:before { 
 
    counter-increment: head2counter; 
 
    content: counter(head2counter)" "; 
 
} 
 
.head2reset { 
 
    counter-reset: head2counter; 
 
}

<h1>Article title</h1> 
 
<h2 class="head2">Services</h2> 
 
<img src="http://www.google.com/about/company/images/company-products.png" width="200" /> 
 
<span class="fig">Google services</span> 
 
<h2 class="head2">E-mail clients</h2> 
 
<h2 class="head2">Others</h2> 
 
<img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png" width="200" /> 
 
<span class="fig">Google logo</span> 
 
<br /> 
 
<img src="http://thenextweb.com/wp-content/blogs.dir/1/files/2013/02/google_chrome.png" width="200" /> 
 
<span class="fig">Chrome</span>

Answer 2

Hm странно, ваша скрипка работа, если вы измените свой CSS на:

.fig { 
    counter-increment: figcounter; 
} 
.fig:before { 
    content: "Fig. " counter(figcounter) ": "; 
    font-weight: bold; 
} 

Посмотрите на скрипке: https://jsfiddle.net/jddkucs7/2/

Но извините, я понятия не имею, почему вашу скрипка не работает. У кого-то есть предложения. Меня тоже интересовало бы объяснение.

Ciao Ralf

Answer 3

ваш счетчик для figcounter не правильно держать счетчик, потому что он сбрасывает счетчик после каждого пролета. вы хотите иметь родителя, которому нужно сохранить счет.

Итак, в вашем примере, если вы вставляете раздел, в котором вы хотите, чтобы счетчик не перезагружался внутри элемента div, он будет работать.

Обратитесь к MDN reference за более глубоким пониманием, и если мои объяснения были такими же ясными, как и грязь.

вот фрагмент код,

body { 
 
    counter-reset: figcounter; 
 
    counter-reset: head2counter; 
 
} 
 
.fig:before { 
 
    counter-increment: figcounter; 
 
    content: "Fig. " counter(figcounter)": "; 
 
    font-weight: bold; 
 
} 
 
.figreset { 
 
    counter-reset: figcounter; 
 
} 
 
.head2:before { 
 
    counter-increment: head2counter; 
 
    content: counter(head2counter)" "; 
 
} 
 
.head2reset { 
 
    counter-reset: head2counter; 
 
}

<body> 
 

 
    <h1>Article title</h1> 
 

 

 
    <h2 class="head2 figreset">Services</h2> 
 

 

 
    <img src="http://www.google.com/about/company/images/company-products.png" width="200" /> <span class="fig">Google services</span> 
 

 

 
    <h2 class="head2 figreset">E-mail clients</h2> 
 

 

 
    <h2 class="head2 figreset">Others</h2> 
 

 

 
    <img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png" width="200" /> <span class="fig">Google logo</span> 
 

 
    <br /> 
 

 
    <img src="http://thenextweb.com/wp-content/blogs.dir/1/files/2013/02/google_chrome.png" width="200" /> <span class="fig">Chrome</span> 
 

 
</body>

Надеется, что это помогает.