CSS についての深い理解counters_html/css_WEB-ITnose

目次 [1] カウンタを作成する [2] カウンタを使用する [3] デモ

前の単語

もはやカウンタに慣れていない 順序付きリストのリスト項目マークはカウンタです。

カウンターの作成

カウンターを作成する基本には、カウンターの開始点をリセットできることと、カウンターを一定量ずつ増加できることの 2 つの側面があります。

counter-reset

counter-reset:none;(默认)counter-reset:<identifier><integer>//<identifier>是计数器标识符，是创作人员自己起的一个名字//<integer>是重置的数字

counter-reset: c1 4;//表示将c1的计数器重置为4counter-reset: c1 4 c2 0 c3 -5;//表示将c1重置为4,将c2重置为0,将c3重置为-5couter-reset: c1;//将c1重置为0

[注] が設定されていない場合、デフォルトは 0 にリセットされます

counter-increment

counter-increment:none;(默认)counter-increment:<identifier><integer>//<identifier>是计数器标识符，是创作人员自己起的一个名字//<integer>是递增的数字

counter-increment: c1 4;//表示将c1计数器的递增设为4    counter-reset: c1 4 c2 0 c3 -5;//表示将c1递增设为4,将c2递增设为0,将c3递增设为-5    couter-increment: c1;//将c1计数器的递增设为1

【注意】もしもnot が設定されている場合、デフォルトの増分は 1 です

counter を使用する

counter の具体的な使用には、content 属性と counter() 関数の組み合わせが必要です

counter() 関数

counter() 関数2 つのパラメータを受け入れます。カンマ (,) を使用して 2 つのパラメータを区切ります。最初のパラメータはカウンタ識別子で、2 番目のパラメータは list-style-type と同じカウンタ スタイル (省略可能) を設定します。リスト内の値。同様に、複数の counter() 関数を使用できます。

content: counter(c1,upper-roman);//表示使用大写罗马字母格式的计数器c1     

【カウンタースタイルの詳細は以下に示されています】

<デモボックス>以下の対応する属性値をクリックしてデモを行ってください

DEMO

簡単なカウンターデモ

< ; ボックス> 以下の対応する属性値をクリックしてデモをご覧ください

階層ディレクトリのデモ

うわぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁ