1

我遇到了 CSS 计数器的问题。

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

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.

4

3 回答 3

2

更改自：

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

至：

body {
    counter-reset: figcounter head2counter;
}

为什么？

因为counter-resetandcounter-increment可以被覆盖。因此，如果您必须使用counter-resetandcounter-increment来表示超过 1 个元素的计数器变量，您需要将它们放在与 and 的相同声明中，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>

于 2015-03-18T16:19:55.290 回答
0

嗯，很奇怪，如果您将 css 更改为：

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

看小提琴：https ://jsfiddle.net/jddkucs7/2/

但是对不起，我不知道为什么你的小提琴不起作用。可能有人有任何建议。我也会对解释感兴趣。

乔拉尔夫

于 2015-03-18T16:18:00.990 回答
0

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

因此，在您的示例中，如果您将希望计数器不重置的部分包含在 div 元素中，那么它将起作用。

请参阅MDN 参考以获得更多理解以及我的解释是否清晰。

这是片段，

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>

希望这可以帮助。

于 2015-03-18T16:25:57.867 回答