CSS_html/css_WEB-ITnose のコンテンツ内のカウンター値の分析

CSS カウンターは、あまり使用されない機能がいくつかありますが、その理由は主に次の 2 つです。

1. サンプルがあまりありません。 🎜>

2. コードは少し複雑になる可能性があります。

CSS カウンターでは、ソートされたリストと同様に、リスト番号を動的に設定できます。ただし、CSS カウンターは疑似要素を使用する点が異なります。特定の counterCSS と組み合わせて、指定された要素セットに動的な「カウント」を追加/先頭に追加します。

コード例は次のとおりです

コード名

.container {  counter-reset: issues 0;}.issue:before {  counter-increment: issues 1;  content: "Issue " counter(issues, decimal);  display: block;}

まず、カウントの範囲を宣言し、.container 要素内で値を 0 から始まる「issues」名を定義します。

次に、ブロックを擬似的に宣言します。要素: berfore、content 属性の内容を先頭に設定します。課題の増分を 1 に設定します。

Content 属性の値には、counter() 関数と文字列を使用します。これは、 JAVASCRIPT または他のプログラミング言語で使用される関数 .counter 関数には、前に宣言した「発行」とカウント方法という 2 つのパラメーターがあるため、この例では 10 進数 (10 進数) の値を使用します。 🎜> まだ混乱している場合は、以下の分析図を見てください:

それだけでは不十分な場合は、他の学習リソースを参照してください。

a) CSS。カウンター: counter-increment と Friends (Impressive Webs)http://www.impressivewebs.com/css-counter-increment/

b) CSS で生成されたコンテンツとカウンターからメリットを得る方法 (Smashing Magazine)http: //www.smashingmagazine.com/2013/04/12/css-generated-content-counters/

c) CSS カウンター スタイル レベル 3 (W3C 仕様) http://dev.w3.org/csswg /css-counter-styles -3/

最後のリンクは CSS のドラフト仕様です。もちろん、サポートされているブラウザーで学習する必要があります。カウンターには他の設定効果もあります。方法は同じです。他の表示モードを試すこともできます。

この記事は Wu Tongwei のブログに属します。

WeChat パブリック アカウント: bianchengderen、QQ グループ: 186659233

オリジナル記事、転載 出典と該当リンクを明記してください: http://www.wutongwei.com/front/infor_showone.tweb?id=182。 皆さんも拡散と共有を歓迎します。