更多CSS中的计数器 [英] More counters in CSS

问题描述

我设置了两个计数器：一个索引标题和其他索引 images 。但是，只有一个正常工作，另一个（对于图像）在所有图像描述中仅显示数字1。您可以在此处查看示例

  body {counter-reset：figcounter; counter-reset：head2counter;}。fig：before {counter-increment：figcounter;内容：图柜台（figcounter）：; font2 weight：bold;}。figreset {counter-reset：figcounter;}。head2：before {counter-increment：head2counter; head2counter;}  

你知道如何解决它吗？如果只有一个计数器，它可以正常工作。我想在标题上独立索引图像。

解决方案

重写> body {
counter-reset：figcounter;
counter-reset：head2counter;

$ / code>

收件人：

  body {
 counter-reset：figcounter head2counter; 
 
 $ / code> 

为什么？



因为 counter-reset 和 counter-increment 可以被覆盖。
所以如果你必须使用 counter-reset 和 counter-increment 1元素计数器变量，您需要将它们放在 counter-reset 和 counter-increment 的同一个声明中，一个分隔它们的空间。
在这种情况下，您只需将计数器复位属性

---

  body {counter-reset：figcounter head2counter;}。fig：before {counter-increment：figcounter;内容：图柜台（figcounter）：; font2 weight：bold;}。figreset {counter-reset：figcounter;}。head2：before {counter-increment：head2counter; head2counter;}  

I'm having a problem with CSS counters.

I set up two counters: one indexes headings and other indexes images. However, only one works correctly, the other one (for images) shows only number 1 in all image descriptions. You can see the example 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>

Do you know how to fix it? If there is only one counter, it works correctly. I want to index images independently on headings.

解决方案

Change from:

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

To:

body {
    counter-reset: figcounter head2counter;
}

Why?

Because the counter-reset and counter-increment can be overridden. So if you have to use counter-reset and counter-increment for more than 1 element counter variable, you need to put them on the same declaration for counter-reset and counter-increment, with a space separating them. In this case you only need to put the counter-reset property

---

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>

这篇关于更多CSS中的计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！