CSS-カウンターリセット

説明

_counter-reset_プロパティは、名前付きカウンターを特定の値に設定します。

可能な値

name -カウンターの名前。名前には任意の文字列値を使用できます。
integer -要素がドキュメントに表示されるたびに、名前付きカウンターの増分を定義します。この増分はゼロ、または負の値になります。整数が指定されていない場合、カウンターは1ずつ増加します。
none -インクリメントは実行されません。

に適用されます

すべてのHTML要素。

DOM構文

object.style.counterReset = "section 1";

例

この例は、「第1章」、「1.1」、「1.2」などで章とセクションに番号を付ける方法を示しています。

<html>
   <head>
      <style>
         body {
            counter-reset: section;
         }
         h1 {
            counter-reset: subsection;
         }
         h1:before {
            counter-increment: section;
            content: "Section " counter(section) ". ";
         }
         h2:before {
            counter-increment: subsection;
            content: counter(section) "." counter(subsection) " ";
         }
      </style>
   </head>

   <body>
      <h1> finddevguides.com</h1>
      <h2> finddevguides.com</h2>
      <h2> finddevguides.com</h2>
      <h2> finddevguides.com</h2>
      <h2> finddevguides.com</h2>
   </body>
</html>

それは次の結果を生成します-

'counter-reset’プロパティはカスケード規則に従います。したがって、カスケードのため、次のスタイルシートは「imagenum」のみをリセットします-

h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }

両方のカウンタをリセットするには、一緒に指定する必要があります-

h1 { counter-reset: section -1 imagenum 99 }

Css-counter-reset

目次

CSS-カウンターリセット

説明

可能な値

に適用されます

DOM構文

例