7

リストのように、h3、h4、h5 の前に数値を取得するために使用しているカウンターに問題があります。数値は、タグに class="count" が含まれている場合にのみ表示され、その場合にのみ、以下のヘッダーのカウンター リセットが必要です。

h3 の番号の表示をスキップすると、h4s カウンターが台無しになり、h4 をスキップする場合も同じです。誰かが理由を知っていますか？

body {
  counter-reset: h3
}
h3 {
  counter-reset: h4
}
h4 {
  counter-reset: h5
}
h3.count:before {
  counter-increment: h3;
  content: counter(h3) ". "
}
h4.count:before {
  counter-increment: h4;
  content: counter(h3) "." counter(h4) ". "
}
h5.count:before {
  counter-increment: h5;
  content: counter(h3) "." counter(h4) "." counter(h5) ". "
}
h3:before,
h4:before,
h5:before {
  content: "";
  counter-increment: none
}
<h3 class="count">: should be : 1</h3>
<h4 class="count">: should be : 1.1</h4>
<h5 class="count">: should be : 1.1.1</h5>
<h5>No counter</h5>
<h5 class="count">: should be : 1.1.2</h5>
<h4>No counter</h4>
<h5 class="count">: should be : <span style="color: #ff0000">1.1.3</span></h5>
<h5>No counter</h5>
<h5 class="count">: should be : <span style="color: #ff0000">1.1.4</span></h5>
<h4 class="count">: should be : 1.2</h4>
<h3>No counter</h3>
<h4 class="count">: should be : <span style="color: #ff0000">1.3</span></h4>
<h5 class="count">: should be : <span style="color: #ff0000">1.3.1</span></h5>
<h5>No counter</h5>
<h5 class="count">: should be : <span style="color: #ff0000">1.3.2</span></h5>
<h4>No counter</h4>
<h5 class="count">: should be : <span style="color: #ff0000">1.3.3</span></h5>
<h5>No counter</h5>
<h5 class="count">: should be : <span style="color: #ff0000">1.3.4</span></h5>
<h4 class="count">: should be : <span style="color: #ff0000">1.4</span></h4>
<h3 class="count">: should be : 2</h3>
<h5 class="count">: should be : 2.0.1</h5>
<h4 class="count">: should be : 2.1</h4>
<h5 class="count">: should be : 2.1.1</h5>
<h5>No counter</h5>
<h5 class="count">: should be : 2.1.2</h5>

CSS

body {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}

h3.count:before { counter-increment: h3; content: counter(h3) ". "}
h4.count:before { counter-increment: h4; content: counter(h3) "." counter(h4) ". "}
h5.count:before { counter-increment: h5; content: counter(h3) "." counter(h4) "." counter(h5) ". "}

h3:before, 
h4:before, 
h5:before{ content: ""; counter-increment: none }

html

<h3 class="count">: should be : 1</h3>
<h4 class="count">: should be : 1.1</h4>
<h5 class="count">: should be : 1.1.1</h5>
<h5>No counter</h5>
<h5 class="count">: should be : 1.1.2</h5>
<h4>No counter</h4>
<h5 class="count">: should be : 1.1.3</span></h5>
<h5>No counter</h5>
<h5 class="count">: should be : 1.1.4</span></h5>
<h4 class="count">: should be : 1.2</h4>

結果

1. : should be : 1
1.1. : should be : 1.1
1.1.1. : should be : 1.1.1
No counter
1.1.2. : should be : 1.1.2
No counter
1.1.1. : should be : 1.1.3
No counter
1.1.2. : should be : 1.1.4
1.2. : should be : 1.2

コード: http://jsfiddle.net/6gj2r1jd/

4

1 に答える 1

6

カウンターの CSS コードに従って、タグh5に遭遇するたびにカウンターの値をリセットする必要があります。h4

body {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5} /* this one */

上記のコードにより、ブラウザーがh4クラスのないタグ (およびコンテンツがNo Counterである) に遭遇すると、カウンターのカウンター値は0 にリセットされます。これが、 1.1.3ではなく1.1として値を取得したh5理由です。 .1

<h5 class="count">: should be : 1.1.2</h5>
<h4>No counter</h4> <!-- This line would cause h5 counter to reset -->
<h5 class="count">: should be : 1.1.3</span></h5>

あなたの質問に対する私の理解が正しければ、実際に必要なのは、見出しタグにclass="count". したがって、以下のようにカウンター リセット CSS コードを変更すると、問題が解決するはずです。

h3.count {counter-reset: h4}
h4.count {counter-reset: h5}


body {
  counter-reset: h3
}
h3.count {
  counter-reset: h4
}
h4.count {
  counter-reset: h5
}
h3.count:before {
  counter-increment: h3;
  content: counter(h3)". "
}
h4.count:before {
  counter-increment: h4;
  content: counter(h3)"." counter(h4)". "
}
h5.count:before {
  counter-increment: h5;
  content: counter(h3)"." counter(h4)"." counter(h5)". "
}
h3:before,
h4:before,
h5:before {
  content: "";
  counter-increment: none
}
<h3 class="count">: should be : 1</h3>
<h4 class="count">: should be : 1.1</h4>
<h5 class="count">: should be : 1.1.1</h5>
<h5>No counter</h5>
<h5 class="count">: should be : 1.1.2</h5>
<h4>No counter</h4>
<h5 class="count">: should be : <span style="color: #ff0000">1.1.3</span></h5>
<h5>No counter</h5>
<h5 class="count">: should be : <span style="color: #ff0000">1.1.4</span></h5>
<h4 class="count">: should be : 1.2</h4>

<h3>No counter</h3>
<h4 class="count">: should be : <span style="color: #ff0000">1.3</span></h4>
<h5 class="count">: should be : <span style="color: #ff0000">1.3.1</span></h5>
<h5>No counter</h5>
<h5 class="count">: should be : <span style="color: #ff0000">1.3.2</span></h5>
<h4>No counter</h4>
<h5 class="count">: should be : <span style="color: #ff0000">1.3.3</span></h5>
<h5>No counter</h5>
<h5 class="count">: should be : <span style="color: #ff0000">1.3.4</span></h5>
<h4 class="count">: should be : <span style="color: #ff0000">1.4</span></h4>

<h3 class="count">: should be : 2</h3>
<h5 class="count">: should be : 2.0.1</h5>
<h4 class="count">: should be : 2.1</h4>
<h5 class="count">: should be : 2.1.1</h5>
<h5>No counter</h5>
<h5 class="count">: should be : 2.1.2</h5>

于 2015-02-17T13:52:34.460 に答える