CSS3 counter_html/css_WEB-ITnose

CSS3 カウンター (CSS カウンター) を使用すると、css を使用してページの要素をカウントできるようになり、順序付きリストと同様の機能が実現されます。

順序付きリストと比較して、パーソナライズされたカウントを実現しながら任意の要素をカウントできることが優れた特徴です。

カウンタ関連属性のリスト:

構文

counter-reset: [?]+|none|inherit

意味

カウンタの初期値と範囲を定義するために使用されます。デフォルト値は none です。

: カウンタ名

: カウンタの初期値

要素の表示が None の場合、この属性は無効です

カウンタ定義メソッドの分析

構文

counter-increment:[?] + |none

意味

カウンタをインクリメントするために使用され、デフォルト値は none (カウンタの増加を防止)

: の名前インクリメントする必要があるカウンタ

: カウンタの増分値。負の値にすることもできます。

複数のカウンターを同時にインクリメントできます

要素の表示が none の場合、この属性は無効です。

カウンタ増加方法の解析

構文

内容: []+

= counter(name)|counter(name,list-style-type)|counters(name, string)|

counters(name,string,list-style-type)

意味

カウンタを使用するには、::before および ::before と組み合わせて使用​​する必要があります。 ：：後。複数のカウンターを同時に使用できます。

カウンターの使用状況の分析

構文形式

@counter-style counterStyleName{

システム: アルゴリズム

範囲: 使用範囲;

シンボル: 一貫性; または追加シンボル: シンボル;

接頭辞: 接尾辞;

パッド: ゼロパディング (例: 01、02、03) ;

負数: 負の数戦略:

フォールバック: エラー後のデフォルト値;

Speakers: 音声戦略;

}

カスタマイズされたカウンター スタイルの例

@counter-style cjk-heavenly-stem{

system:alphabetic;

シンボル: "7532 " "4E59" "4E19" "4E01" "620A" "5DF1" "5E9A" "8F9B" "58EC" "7678";

/*A、B、C、D、Wu、Ji、Geng、 Xin Renkui*/

サフィックス:",";

}