CSSで自動番号付けを実装するにはどうすればよいですか?カウンターの使用

この記事の内容はCSSで自動採番を実装する方法を紹介するものです。カウンターの使用。困っている友人は参考にしていただければ幸いです。

1. 自動番号付け

CSS 2.1 の自動番号付けは、「counter-increment」と「」の 2 つの属性によって制御されます。カウンタリセット」。これらのプロパティで定義されたカウンターは、「content」プロパティの counter() および counter() 関数で使用されます。

'カウンターインクリメント'

構文:

counter-increment：[ <identifier> <integer>? ]+ | none | inherit

説明:

初期: なし

適用対象: すべての要素

継承: なし

パーセンテージ: N/A

メディア: すべて

計算値: 指定された

counter-increment' 属性として受け入れられるカウンター (識別子) の 1 つ以上の名前。オプションで各名前の後に整数が続きます。要素が出現するたびにカウンタをどれだけ増分するかを表す整数。デフォルトの増分は 1 で、ゼロと負の整数が許可されます。

'counter-reset'

構文:

counter-reset：[ <identifier> <integer>? ]+ | none | inherit

説明:

初期: なし

適用対象: すべての要素

継承: なし

パーセンテージ: N/A

メディア: すべて

計算値: 指定されているように、

counter-reset 属性には 1 つ以上のカウンターの名前が含まれており、各名前の後にオプションで整数のリストが続きます。要素が出現するたびにカウンタに設定される値を示す整数。デフォルト値は 0 です。

注: キーワード「none」、「inherit」、および「initial」はカウンター名として使用できません。値「none」自体はカウンターがリセットされないことを意味し、「inherit」自体はカウンター名として使用されます。通常の意味 (継承)、「initial」は将来の使用のために予約されています。

例：「第1章」、「1.1」、「1.2」などを使用して章に番号を付ける方法を示します。

html コード:

<h1>大标题</h1>
<h2>小标题1</h2>
<h2>小标题2</h2>

css コード:

body {
    counter-reset: chapter;      /* 创建章节计数器范围 */
}
h1:before {
    content: "第" counter(chapter) "章、";
    counter-increment: chapter;  /* 在章节中添加1 */
}
h1 {
    counter-reset: section;      /* 将部分设置为0 */
}
h2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

レンダリング:

#注意:

1. 要素がカウンターをインクリメント/リセットし、さらにそのカウンターを (その :before または :after 疑似要素の 'content' 属性で) 使用する場合は、それをインクリメント/リセットする必要があります。リセット後。

2. 要素がカウンタのリセットとインクリメントの両方を行う場合は、最初にカウンタをリセットしてからインクリメントします。

3. 'counter-reset' および 'counter-increment' 属性の値に同じカウンタが複数回指定された場合、カウンタの各リセット/インクリメントは指定された順序で処理されます。

例:

1. 「セクション」カウンターを 0 にリセットします:

h1 { counter-reset: section 2 section }

2. 「チャプター」カウンターを 3 増やします:

h1 { counter-increment: chapter chapter 2 }

3. 「counter-reset」属性のカスケード ルールに従います。したがって、カスケードにより、スタイルシート

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

4 は「imagenum」のみをリセットします。 2 つのカウンターをリセットするには、

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

2 を同時に指定する必要があります。カウンターのスタイル

デフォルトでは、カウンターは 10 進数を使用します。数値の書式設定ですが、「list-style-type」属性の使用可能なスタイルはすべてカウンターでも使用できます。シンボルは次のとおりです:

counter(name)

デフォルトのスタイル、または他のスタイルを設定します:

counter（name，< &#39;list-style-type&#39; >）

カウンタでは、'disc'、'circle'、'square を含む list-style-type 属性を使用するすべてのスタイルが許可されます。 」と「なし」。

例:

h1:before {
	content: counter(chno, upper-latin) ". "
}

h2:before {
	content: counter(section, upper-roman) " - "
}

blockquote::after {
	content: " [" counter(bq, lower-greek) "]"
}

div.note:before {
	content: counter(notecntr, disc) " "
}

p:before {
	content: counter(p, none)
}

要約: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がCSSで自動番号付けを実装するにはどうすればよいですか?カウンターの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。