2

簡単に言えば、順序付きリストを次のように機能させたいと考えています。

 1. Foo
 2. Bar
3a. Baz
3b. Qux
 4. Etc...

HTMLでこれらの行に沿って何かを簡単に行う方法はありますか?

4

2 に答える 2

5

次のマークアップがあるとします。

<ol>
    <li>Foo</li>
    <li>
        <ol>
           <li>bar</li>
           <li>baz</li>
        </ol>
    </li>
    <li>Something else...</li>
</ol>​

次の CSSはほとんど機能します。

ol {
    counter-reset: topLevel;
}

li {
    counter-increment: topLevel;
    margin-left: 1em;
}

li::before {
    content: counter(topLevel) '. ';
    margin-right: 0.3em;
}

ol ol {
    counter-reset: secondLevel;
}

ol ol li {
    counter-increment: secondLevel;
}

ol ol li::before {
    content: counter(topLevel) counter(secondLevel, lower-alpha) '. ';
}

JS フィドルのデモ。

これに関する唯一の問題は、これまでのところ、内側の要素 (必要に応じて) と外側の要素 (それらの内側の要素を含む)topLevelの両方に対するカウントが含まれていることです。lili

そして、上記の問題は解決しました！...CSS:not()セレクターをサポートするブラウザーでは:

ol {
    counter-reset: topLevel;
}

li {
    counter-increment: topLevel;
    margin-left: 1em;
}

li:not(.hasChild)::before {
    content: counter(topLevel) '. ';
    margin-right: 0.3em;
}

ol ol {
    counter-reset: secondLevel;
}

ol ol li {
    counter-increment: secondLevel;
}

ol ol li::before,
ol li.hasChild ol li::before {
    content: counter(topLevel) counter(secondLevel, lower-alpha) '. ';
}

JS フィドルのデモ。

（もともと）これが機能するために（CSSには親セレクターがないため（まだ）） 、番号の重複を適切に隠すためにli、子要素を持つ要素に特定のクラスを追加する必要があることに注意するのを忘れていました。olこの場合、クラス名を選択し.hasChildました (フィドルで確認できます)。

ちなみに、li:not(.hasChild)::beforeルールを少し変更すると、テキストを右揃えにすることができます。

li:not(.hasChild)::before {
    content: counter(topLevel) '. ';
    width: 2em;
    margin-right: 0.3em;
    display: inline-block;
    text-align: right;
}

JS フィドルのデモ。

于 2012-09-07T21:45:00.873 に答える
1

それはあなたの要件を完全には満たしておらず、html にいくつかの (面倒な) 変更を必要としますが、あなたが得られるのと同じくらい近いと思います.

http://jsfiddle.net/qGCUk/30/

<ol>
    <li>one</li>
    <li class="has_children">
        <ol>
           <li>two.one</li>
           <li>two.two</li>
           <li>two.three</li>
        </ol>
    </li>
</ol>

ol,li{
   padding:0;
   margin:0;    
}
ol { counter-reset: item }
li { display: block; padding-left: 0 }
li:before { 
    content: counters(item, ".") " "; 
    counter-increment: item 
}
LI.has_children:before { 
    content: " "; 
    counter-increment: item 
}

数字と文字を混在させることはできないと思うので、これは数字のみです。andliを含む andを選択するセレクターがないため、 child を持つolany にクラスを追加する必要があります。liol

于 2012-09-07T21:27:47.517 に答える