各行の前に行番号を指定して、コードの事前ボックスのスタイルを設定しようとしています。私はCSSのみでそれを行うことを好みます。これは私がやったことです
pre {
background: #303030;
color: #f1f1f1;
padding: 10px 16px;
border-radius: 2px;
border-top: 4px solid #00aeef;
-moz-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
}
pre span {
display: block;
line-height: 1.5rem;
}
pre span:before {
counter-increment: line;
content: counter(line);
display: inline-block;
border-right: 1px solid #ddd;
padding: 0 .5em;
margin-right: .5em;
color: #888
}
<pre>
<span>lorem ipsum</span>
<span>>> lorem ipsum</span>
<span>lorem ipsum,\ </span>
<span>lorem ipsum.</span>
<span>>> lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
</pre>
ただし、すべての行の番号は1です。増分は機能しません。 jsfiddle です
カウンタが増加しないのはなぜですか?
親タグレベルでカウンタをリセットまたは作成しているわけではありません。次の行をpre
セレクターに追加すると、コードは正常に機能します。親レベルで(counter-reset
を使用して)カウンターを作成しない場合、各要素は独自のカウンターを作成してからインクリメントします。
counter-reset: line;
カウンターはいつ作成されますか?
W3C Specs から:
Counter-resetプロパティは、要素に新しいカウンターを作成します。
Counter-setおよびcounter-incrementプロパティは、既存のカウンターの値を操作します。それらは要素に指定された名前のカウンターがまだない場合にのみ新しいカウンターを作成します。
この場合、counter-reset
プロパティを使用してカウンターを作成していないため、counter-increment
擬似要素セレクターのspan:before
プロパティは指定されたカウンターを作成します名前を付けてインクリメントします。
カウンターは現在の値をどのようにして知るのですか?
再び W3C Specs から:
要素に前の兄弟がある場合、兄弟のすべてのカウンターを継承する必要があります。それ以外の場合、要素に親がある場合、親のすべてのカウンターを継承する必要があります。それ以外の場合、要素には空のカウンターセットが必要です。
次に、要素は文書の順序で直前の要素からカウンタ値を継承します。
ここでは、カウンターは擬似要素でのみ作成されるため、その親(span
)はその作成を認識しないため、このspan
の兄弟はカウンターを継承しません。カウンターも継承しないため、前の要素から現在の値も取得しません。
なぜ親のカウンターを作成するのですか?
カウンターがpre
タグレベルで作成されると、カウンターはその各子要素に渡されます(つまり、各span
に、各span:before
が知っているか、このカウンタを継承します)、span:before
のインクリメントステートメントは、親から受け取ったカウンタの値のみをインクリメントします。
これで、各span
はその前の兄弟からline
カウンターを継承するため、ドキュメントの順序の前の要素から現在の値も継承するため、1から2、3などに増え続けます。
スパンまたはプレワークでカウンターインクリメントを使用する理由
ご想像のとおり、counter-incrementプロパティcreatesが存在しない場合、新しいカウンターを作成しますカウンターですので、span
にcounter-increment: line
を追加すると、最初に検出されたスパンにカウンターが作成されます。現在、span
の各兄弟はこのカウンターを継承しているため、毎回新しいカウンターを作成するのではなく、前の要素から値を継承するだけです。したがって、このアプローチは機能しますが、counter-reset
ステートメントを使用してカウンターを明示的に作成することをお勧めします。
ブラウザはどのようにサポートしていますか?
CSSカウンターのブラウザーサポートは信じられないほど優れています。 CSSの新しいものではなく、 IE8でもサポートされています 。
デモ:
pre {
background: #303030;
color: #f1f1f1;
padding: 10px 16px;
border-radius: 2px;
border-top: 4px solid #00aeef;
-moz-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
counter-reset: line;
}
pre span {
display: block;
line-height: 1.5rem;
}
pre span:before {
counter-increment: line;
content: counter(line);
display: inline-block;
border-right: 1px solid #ddd;
padding: 0 .5em;
margin-right: .5em;
color: #888
}
<pre><span>lorem ipsum</span>
<span>>> lorem ipsum</span>
<span>lorem ipsum,\ </span>
<span>lorem ipsum.</span>
<span>>> lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
</pre>
スパンでline
をインクリメントする必要があります。
pre span {
display: block;
line-height: 1.5rem;
counter-increment: line;
}
この更新された jsfiddle をご覧ください。
こんにちは、以前の/より高い負荷のアイテムのカウンターをリセットする必要があります、チェックアウト https://jsfiddle.net/n2xkgt7s/2/pre { counter-reset: line; }