状況を想像してください。作成する必要があるページのレイアウトには、順序付けられたリストがあります。 すべてうまくいきますが、デザインでは、リスト内のテキストのスタイルは、各アイテムのマーカーとして機能する数字のスタイルとは異なります。
そして、フォントサイズ、色、その他のフォントプロパティの違いが小さい場合は、大丈夫です。 この場合、これを実装する最も簡単な方法は、リストアイテムのスタイル（これがマーカーのスタイルになります）を設定し、対応するスタイルをオーバーライドするブロックでアイテムのコンテンツ全体をフレーム化することです。
しかし、違いがフォントだけではない場合はどうでしょうか？ この場合、ほとんどの場合、タイプセッターはセマンティクスを打ち出し、リスト内の各アイテムに対応する番号を持つ要素を追加します。必要なスタイルは既に設定されています。 この解決策には多くの欠点があります-これはセマンティクスの吐き出しであり、サーバーからの実装の必要性です。
この場合の最も論理的で正しい解決策は、疑似要素の
:beforeに
:beforeを使用し、
適切な仕様
ルールを使用してカウンターを実装することです。
ただし、ご想像のとおり、1つの美しいブラウザでは、これはすべて機能しません。 状況を修正するには、1回限りの操作が役立ちます。これにより、カウンタのある擬似要素
:beforeエミュレーションが作成されます。
したがって、すべてのブラウザに次のように提供します。
.list {
counter-reset:list_item;
}
.list-item {
display:block;
}
.list-item:before,
.list-item-before {
content:counter(list_item);
counter-increment:list_item;
}
IEのみ：
.list-item {
list-style-type:expression(
function(t){
t.runtimeStyle.listStyleType = 'none';
t.insertAdjacentHTML('afterBegin','<span class="list-item-before">' + (++t.parentNode.IEcounter || (t.parentNode.IEcounter = 1)) + '</span>');
}(this)
);
}
注意すべきいくつかのポイント：
.list-item:beforeセレクターと共に、生成された新鮮なアイテムのクラス名で.list-item-beforeセレクターを規定します。- 単純なブラウザの場合、標準のリストマーカーはルール
.list-item { display:block; } .list-item { display:block; } 、しかしIEではこの点は機能しません-ワンタイムアクセスはlist-style-typeプロパティを介して実装されたため、単純な場合（要素をフロートするか、他のプロパティを使用する必要がない場合、IEのマーカーを無効にする） IE javascriptでは、式は機能せず、標準マーカーが表示されます。 - 条件付きコメントに式を入れることを忘れないでください、これはカルマとWebkitエンジンに基づくブラウザにとって有害です:)
- 以下に簡単な例を示します。