1

CSS カウンターに問題があります。

headings1 つのインデックスと他のインデックスの2 つのカウンターを設定しましたimages。ただし、正しく機能するのは 1 つだけです。もう 1 つ (画像用) は、すべての画像の説明で 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>

それを修正する方法を知っていますか?カウンターが 1 つしかない場合は、正常に機能します。で画像を個別にインデックス付けしたいheadings

4

3 に答える 3

2

から変更する:

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

に:

body {
    counter-reset: figcounter head2counter;
}

なんで?

counter-resetandcounter-incrementはオーバーライドできるためです。したがって、複数の要素カウンター変数に対してcounter-resetandを使用する必要がある場合は、それらをスペースで区切ってandの同じ宣言に配置する必要があります。この場合、プロパティを配置するだけで済みますcounter-incrementcounter-resetcounter-incrementcounter-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 に答える