11

次の CSS カウンターの例は、期待どおりに機能しません。小見出しのカウンターは、主見出しごとにリセットする必要があります。

body {
  font: smaller sans-serif;
  counter-reset: h1 h2;
}
h1:before {
  counter-reset: h2;
  content: counter(h1) ". ";
  counter-increment: h1;
}
h2:before {
  content: counter(h1) "." counter(h2) ". ";
  counter-increment: h2;
}
<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>
<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>

ただし、以下は期待どおりに機能します。

body {
  font: smaller sans-serif;
  counter-reset: h1 h2;
}
h1:before {
  content: counter(h1) ". ";
  counter-increment: h1;
}
h1 {
  counter-reset: h2;
}
h2:before {
  content: counter(h1) "." counter(h2) ". ";
  counter-increment: h2;
}
<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>
<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>

counter-reset私の質問は、疑似要素内で機能しないのはなぜですか?

4

1 に答える 1

11

これは範囲の問題だと思います。ドキュメントの状態：

カウンターは、子孫要素または疑似要素でカウンターをリセットすると、カウンターの新しいインスタンスが自動的に作成されるという意味で、「自己ネスト」です....

... カウンターのスコープは、そのカウンターの「カウンター リセット」を持つドキュメント内の最初の要素から始まり、要素の子孫と、その子孫に続く兄弟を含みます。ただし、要素の後の兄弟の「カウンター リセット」または同じ要素の後の「カウンター リセット」によって作成された同じ名前のカウンターのスコープ内の要素は含まれません。

私がこれを理解する方法は、カウンターをリセットすると、カウンターの新しいインスタンスが親要素に作成されるということです。これを行うh1:beforeと、その単一の<h1>要素で作成され、すぐに閉じられます...したがって、初期カウンターでリセットされません。

于 2015-02-26T15:50:17.283 に答える