3

CSS カウンターを使用して見出しにセクション番号を追加する通常の方法を使用すると、headerタグの使用時に問題が発生します。

counterどういうわけか（s）に干渉しているようです

body {
  counter-reset: h1
}
h1 {
  counter-reset: h2
}
h2 {
  counter-reset: h3
}
h1:before {
  counter-increment: h1;
  content: counter(h1)". "
}
h2:before {
  counter-increment: h2;
  content: counter(h1)"." counter(h2)". "
}
h3:before {
  counter-increment: h3;
  content: counter(h1)"."counter(h2)"." counter(h3)". "
}
<!DOCTYPE HTML>
<html>

<head>
  <title>Headings counting</title>

</head>

<body>
  <header>
    <h1>First chapter</h1>
  </header>
  <h2>Sub Chapter</h2>
  <h2>Sub Chapter</h2>
  <h2>Sub Chapter</h2>
  <h3>Sub sub section</h3>
</body>

</html>

出力は次のとおりです。

  • 最初の章
  • 1.1。サブチャプター
  • 1.1。サブチャプター
  • 1.1。サブチャプター
  • 1.0.1。サブサブセクション

headerタグを削除した後output is as expected:

    1. 最初の章
  • 1.1。サブチャプター
  • 1.2. サブチャプター
  • 1.3。サブチャプター
  • 1.3.1. サブサブセクション

headerH1 付近のタグを使用すると、この結果になるかどうか。Chrome と Opera ではなく、Firefox と Edge でそうします

4

1 に答える 1

2

タグの有無に応じheaderて、counter-resetin宣言ルールを置き換える/追加するだけです。h1h1header

body {
  counter-reset: h1
}

header { /* add h1 if you going to use h1 without header tag */
  counter-reset: h2
}
h2 {
  counter-reset: h3
}
h1:before {
  counter-increment: h1;
  content: counter(h1)". "
}
h2:before {
  counter-increment: h2;
  content: counter(h1)"." counter(h2)". "
}
h3:before {
  counter-increment: h3;
  content: counter(h1)"."counter(h2)"." counter(h3)". "
}
<header>
  <h1>First chapter</h1>
</header>
<h2>Sub Chapter</h2>
<h2>Sub Chapter</h2>
<h2>Sub Chapter</h2>
<h3>Sub sub section</h3>

于 2016-09-05T10:48:38.783 に答える