Question

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

更改自：

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的相同声明中，并用空格分隔它们。在这种情况下，您只需要放置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

嗯，奇怪的是，如果你将你的css改为：

，你的小提琴会起作用

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

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

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

侨拉尔夫

Answer 3

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

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

3 个答案: