次のような単純なリストがあるとしましょう。
<ol>
<li class="count">one</li>
<li class="count">two</li>
<li class="count">three</li>
<li class="count">four</li>
<li>blabla</li>
<li class="count">five</li>
<li class="count">six</li>
<li>blabla</li>
<li class="count">seven</li>
</ol>
今、クラス「count」でリスト項目に番号を付けたいだけです
したがって、CSS を追加すると:
li {
list-style-type: decimal;
}
次に、クラスのないリスト項目の list-style-type を削除します。
li:not(.count) {
list-style-type: none;
}
私はこれを得る:
li {
list-style-type: decimal;
}
li:not(.count) {
list-style-type: none;
}
<ol>
<li class="count">one</li>
<li class="count">two</li>
<li class="count">three</li>
<li class="count">four</li>
<li>blabla</li>
<li class="count">five</li>
<li class="count">six</li>
<li>blabla</li>
<li class="count">seven</li>
</ol>
ここでの明らかな問題は、クラスのないリスト項目もここで「カウント」され、表示されないことです。
したがって、上記の例では、リストに 7 の番号を付ける必要があります。番号付けでは、クラスのないリスト項目はスキップされます。これはCSSで行うことができますか?