CSS の擬似要素は実際には非常に簡単に使用できますが、多くの人は、擬似要素で一般的に使用される content 属性の値が文字列以外にサポートされているとしか考えていないかもしれません。他によく使われるコンテンツ属性には、uri と counter があります。今日紹介するのは conter (counter) です。
CSS のカウンターは変数に似ており、単純なカウント関数を実装し、結果をページに表示できます。初期の Web サイトで広く使用されています。カウンターを実装するには、次の属性を使用する必要があります。
CSS でカウンターがどのように使用されるかを見てみましょう。
1. カウンターを使用して自動番号付けを行う
CSS カウンターは、ルールに従って変数を増分します。
CSS カウンターは次のプロパティを使用します。
(1) counter-reset:name1 name2 カウンターを作成またはリセットします (複数のカウンターをスペースで区切って同時に定義できます)
(2) counter-increment:name ステップ インクリメント変数 (1 つ以上インクリメント可能)
(3) content:counter(name) 生成されたコンテンツを挿入します（前後に擬似要素を使用）
(4) counter()またはcounters()関数は要素にカウンタ値を追加します。
カウンタを作成する場合は、必ず前タグまたはそのタグの親タグ内に作成する必要があります。 自身のタグ内に定義した場合は無効となります。
特定の用途:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Dotcpp プログラミング</title><style>div{counter-reset:counter1;}h2{counter-reset:counter2;}h2:: before{/*最初にステップ サイズを設定します*/counter-increment:counter11;content:'Article 'counter(counter1)';}p::before{/*最初にステップ サイズを設定します*/counter-increment:counter21;content :'段落 'counter(counter1)';}</style></head><body><div><h2></h2><p></p><p></p><p >< /p><h2></h2><p></p><p></p><p></p><p></p></div></body></ html>実行結果:
2. カウンタの初期化
カウンタを使用するには、まず counter-reset 属性を使用してカウンタを作成する必要があります。このプロセスはカウンタの初期化と呼ばれます。 counter-reset 属性の構文形式は次のとおりです。
カウンタリセット: なし|[<識別子><整数>]
パラメータの説明は次のとおりです。
(1) なし: カウンタのリセットを防止します。
(2) <identifier>: カウンタの名前を定義します。
(3) <integer>: カウンタの開始値を定義します。デフォルト値は 0 で、負の値も可能です。
3. カウンターは自動的に増加します
カウンタを初期化した後、counter-increment 属性を使用して、カウンタがいつ増加するかを指定できます。構文は次のとおりです。
カウンタ増分: なし|[<識別子><整数>]
パラメータの説明は次のとおりです。
(1) なし: カウンタの増加を防ぎます。
(2) <identifier>: インクリメントするカウンタの名前を定義します。
(3) <integer>: カウンタが毎回増加する値を定義します。デフォルト値は 1 で、負の値も可能です。
4. ディスプレイカウンター
最後にカウンターの表示方法です。カウンタを表示するには、counter() または columns() 関数を使用できます。これら 2 つの関数の構文は次のとおりです。
counter(name)counters(name,string,list-style-type)
パラメータの説明は次のとおりです。
(1) name: カウンタの名前。
(2) string: カウンタが入れ子になって使用される場合にスプライシングに使用される文字列。
(3) list-style-type: カウンタによって表示されるスタイルは、CSS で許可されている「list-style-type 属性」の任意の値にすることができます。
以下では、簡単な例を使用してカウンターの使用法を示します。
<!DOCTYPEhtml><html><head><style>body{counter-reset:chapter;}h5,h6{margin:5px05px;}h5{counter-reset:section;counter-increment:chapter;}h6{counter- increment:section;}h5:before{content:Chaptercounter(chapter).;}h6:before{content:counter(chapter).counter(section);}</style></head><body><h5> 章</h5><h6>セクション 1</h6><h6>セクション 2</h6><h6>セクション 3</h6><h6>セクション 4</h6><h5>第 2 章</h5> <h6>セクション 1</h6><h6>セクション 2</h6><h6>セクション 3</h6><h6>セクション 4</h6></body> </html>実行結果:
5. カウンターのネスティング
さらに、カウンターはネストすることもでき、次の例に示すように、counters() 関数を使用して、さまざまなレベルでネストされたカウンターの間に文字列を挿入できます。
<!DOCTYPEhtml><html><head><style>ol{/*ol 要素ごとに新しいカウンタ インスタンスを作成します*/counter-reset:ol-list;list-style-type:none;}li:before{ / *カウンターの現在のインスタンスのみを増やします*/counter-increment:ol-list;/*すべてのカウンター インスタンスの「.」で区切られた値を増やします*/content:counters(ol-list,.),;} </style ></head><body><ol><li>ボリューム</li><li>章<ol><li>セクション</li><li>セクション</li><li>セクション< ol>< li>セクション </li><li>セクション </li></ol></li><li>セクション <ol><li>セクション </li><li>セクション </li>< li>セクション </li></ol></li></ol></li><li>章</li><li>章</li></ol></body></html >実行結果:
