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

嗯奇怪，你的 fiddle 有效，如果你将 css 更改为：

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

看看fiddle：https://jsfiddle.net/jddkucs7/2/

但是抱歉，我不知道为什么您的 fiddle 不起作用。可能有人有任何建议。我也想知道解释。

再见拉尔夫

Answer 2

更改自：

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

收件人：

body {
    counter-reset: figcounter head2counter;
}

为什么？

因为 counter-reset 和 counter-increment 可以被覆盖。因此，如果您必须使用 counter-reset 和 counter-increment 多于 1 个元素计数器变量，您需要将它们放在 counter-reset 和 counter-increment 的相同声明中，并用 space 分隔它们。在这种情况下，您只需要将 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 3

你的 figcounter 计数器没有正确地保持计数，因为它在每个跨度后重置计数器。你想要的是有一个需要保持计数的 parent。

因此，在您的示例中，如果您将不希望计数器重置的部分包含在 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>

希望这对您有所帮助。

CSS 中的更多计数器

More counters in CSS

html

css

css-counter