CSS カウンターとコンテンツの概要

コンテンツプロパティは CSS 2.1 で導入され、:before および :after 疑似要素を使用してコンテンツを生成できます。現在、コンテンツ属性はほとんどのブラウザでサポートされています。コンテンツ属性のサポートの詳細については、caniuse.com をご覧ください。現在のサポート状況は次のとおりです。

コンテンツ属性は、コンテンツを生成するために :before または :after とともに使用されることが最も一般的です。デフォルトでは、要求される要素はインライン要素です。

上記のコードの目的は、testというクラス名を持つdivのコンテンツの前後にcontent内のコンテンツを追加することです。contentの後に他のスタイルを設定することもできます。ここで、contentは疑似要素のアクティベーションマークに相当し、必須です。

div.test:before{
    内容: "私はdivの前にいます"; 
}
div.test:after{
     内容: "私はdivの後ろにいます";
}

コンテンツ属性の値は、テキスト値を使用するだけでなく、attr() メソッドを通じて他のタグの属性値を使用することもできます。

a.テスト:後{
    コンテンツ: attr(href);
}

<a class="test" href="http://www.taobao.com/">ようこそ</a>

CSS カウンターは比較的早く登場しましたが、私は最近になってようやく理解し始めました。 CSS カウンターはコンテンツ属性と一緒に使用した場合にのみ機能し、コンテンツ属性は :before および :after 疑似要素と一緒に使用されることが多いため、カウンター、疑似要素、およびコンテンツの間には切り離せない関係があります。 CSS カウンターは主に次の 2 つのプロパティと 1 つのメソッドで構成されます。

1. カウンターリセット

このプロパティはカウンターの名前を定義します。複数のカウンターを同時に定義できます。数値を定義すると、初期値を表します。デフォルト値は 0 です。

div.count{
    カウンターリセット: count1 count2;
}

上記のコードは、count1 と count2 という 2 つのカウンターを定義しており、デフォルトでは最初は 0 に設定されています。

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

このプロパティは 2 つのパラメータを受け入れます。最初のパラメータはカウンターの名前を表し、2 番目のパラメータは各増分の値を表します。デフォルト値は 1 です。

div.count:before{
    カウンター増分: count1 2;
}

このコード行は、カウンター count1 の単一の自己増分値を定義します。この時点で、カウンターのデフォルトの初期値は 0+2=2 です。ここで数値 2 を省略すると、デフォルトの自己増分値は 1 になり、カウンターの初期値は 0+1=1 になります。

3. カウンター()/カウンター()

このメソッドは、2 つのパラメータを受け取るカウンター呼び出しメソッドです。最初のパラメータはカウンター名で、2 番目は値の型です。このケースについて、簡単な演習をしてみましょう。

<!doctypehtml>
<html>
    <ヘッド>
         <メタ文字セット="utf-8">
         <title>カウンターとコンテンツ</title>
         <スタイル>
                div.conter{
                    左マージン: 50px;
                    カウンタリセット: count; /* カウンタカウントを定義する */
                }
               .conter p{
                     高さ: 40px;
                     境界線: 1px 実線 #ffe000;
                }
               .conter p:before{
                     内容: counter(count,decimal) "." /*カウンターを呼び出して数値を追加します。*/
                     カウンター増分: count;
                }
         </スタイル>
    </head>
    <本文>
         <div class="conter">
               <p>段落 1</p>
               <p>段落 2</p>
               <p>段落 3</p>
               <p>段落 4</p>
               <p>段落 5</p>
         </div>
    </本文>
</html>

最終結果は次のとおりです。

CSS カウンターとコンテンツの概要に関するこの記事はこれで終わりです。より関連性の高い CSS カウンターコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQL のテーブルリターンとインデックスカバレッジの例の詳細な説明

>>: JPG、GIF、PNGなどのさまざまな画像形式の詳細な説明