CSSの擬似クラスは、自動充填ライン番号を実装します

CSSの擬似クラスは、自動充填ライン番号を実装します

時間のほとんどは、我々は、Liは行番号を記入達成> JSやオールを持つ要素に行番号で満たされ、自動的に我々は要素を挿入することができますほとんどの時間で満たされた番号を整列する必要があります

上記の方法のために、彼らは非常に柔軟ではない、と余分な作業を行う必要があり、

 

私たちは今、自動的に行番号を達成するために、コンテンツ属性CSSの疑似クラスが移入します

CSSの擬似クラスの主な用途 

コンテンツ：カウンター（ステップ）。

HTML

< 本部> 
    < p型>これは、いくつかのテキストです。</ p型> 
    < p型>これは、いくつかのテキストです。</ p型> 
    < p型>これは、いくつかのテキストです。</ p型> 
    < p型>これは、いくつかのテキストです。</ p型> 
    < p型>これは、いくつかのテキストです。</ P > 
    < P >これは、いくつかのテキストです。</ P > 
    < P >これは、いくつかのテキストです。</ P > 
    < P >これは、いくつかのテキストです。</P > 
    < P >これは、いくつかのテキストです。</ P > 
    < P >これは、いくつかのテキストです。</ P > 
    < P >これは、いくつかのテキストです。</ P > 
    < P >これは、いくつかのテキストです。</ P > 
    < P >このいくつかのテキストです。</ p型> 
</ DIV >

CSS

DIV {
    カウンターリセット：ステップ;
    カウンタインクリメント：ステップ0。
}
P {
    位置：相対;
    マージン：4PX 0;
    パディング左：は24px;
}
P :: {前
    コンテンツ：カウンター（ステップ）。
    カウンターインクリメント：ステップ;
    位置：絶対;
    左：0;トップ：0;
    表示ブロック;
    幅：20ピクセル;
    テキスト整列：右;
    背景色：#eee;
}

レンダリング