CSS3 counter_html/css_WEB-ITnose

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

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

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

属性	属性说明
counter-reset	定义计数器，包括初始值、作用域等
counter-increment	设置计数器的增数
content	早::before和::after中生成内容
counter()	在content属性中使用，用来调用计数器
@counter-style	自定义列表样式

構文

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

意味

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

: カウンタ名

: カウンタの初期値

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

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

代码	代码解析
counter-reset:counterA	定义计数器counterA,初始值为默认值0
counter-reset:counterA 6;	定义计数器counterA,初始值为6
counter-reset:counterA 4,counterB;	定义计数器counterA、counterB,初始值分别为4和0
counter-reset:counterA 4，counterB 2;	定义计数器counterA、counterB，初始值分别为4和2

構文

counter-increment:[?] + |none

意味

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

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

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

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

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

カウンタ増加方法の解析

代码	代码解析
counter-increment:counterA	增数计数器counterA,每次增加1
counter-increment:counterA 2	增数计数器counterB,每次增加2
counter-increment:counterA 2,counterB -1	同时增数计数器counterA、counterB，分别加2、-1

構文

内容: []+

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

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

意味

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

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

代码	代码解析
content:"Fig." counter(imgCounter);	混合字符串和计数器imgCounter
content:"Fig." counter(imgCounter,lower-alpha)	指定计数器的列表格式
content:counters(section,".") " ";	在计数器之间加上点号，同时在计数器最加上一个空格
content:counters(section,".",lower-roman) " ";	定义计数器为小写罗马数字格式，同时加点号，空格

構文形式

@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*/

サフィックス:",";

}