CSSカウンター関連属性の学習の詳細な説明

CSS カウンター属性はほぼすべてのブラウザ (IE8 を含む) でサポートされていますが、あまり使用されていません。この記事では、これらの属性について学習する方法を説明します。

カウンターリセット

明らかにカウンターリセットとして翻訳されています。例: counter-reset: counter-name

一般的には

/* カウンター名を 0 に設定 */
カウンターリセット: カウンター名;

/* カウンター名を -1 に設定 */
カウンターリセット: カウンター名 -1;

/* counter1 を 1 に設定し、counter2 を 4 に設定します */
カウンターリセット: カウンター1 1 カウンター2 4;

要素のカウンターをリセットするために使用されます

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

カウンタ増分はカウンタリセットと翻訳されます

一般的には

/* カウンター名を 1 増やす */
カウンター増分: カウンター名;

/* カウンター名を 1 減らす */
カウンター増分: カウンター名 -1;

/* counter1 を 1 増加し、counter2 を 4 減少します */
カウンター増分: カウンター 1 カウンター2 -4;

counter-increment を使用する前に、まず counter-reset を使用して親要素内のカウンターを初期化する必要があります。

例えば：

// 親要素にはカウンターリセットがあります
// インスタンス化するために適用されます
セクション {
  カウンターリセット: unicornCounter;
}

// カウントする子要素を指定する
セクション h1 {
  カウンター増分: unicornCounter;
}

上記のコードでは、セクションの各h1要素はカウント値1に設定されます。

CSS構文ルール

COUNTER-RESETとCOUNTER-INCREMENTは構文が似ている

最初の<custom-ident>は特定のカウンター識別子を示します

az 0-9 _ - で構成された単語にすることができますが、none、unset、initial、inherit のキーワードにすることはできません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。