13

counter-resetolがdivにいるときに苦労しています。スニペットの番号付けのレッド リストは次のようになります。

1、2、3

いいえ：

3.1、3.2、3.3、

ol {
    counter-reset: item;
    list-style: none;
}
li:before {
    counter-increment: item;
    content: counters(item, ".")" ";
}
<ol>
    <li>BBD</li>
    <li>BBD
        <ol>
            <li>BBD</li>
            <li>BBD</li>
            <li>BBD</li>
        </ol>
    </li>
    <li>BBD</li>
</ol>

<ol>
    <li>BBD</li>
    <li>BBD</li>
    <li>BBD</li>
</ol>

<div>
    <ol style="color:red;">
        <li>BBD</li>
        <li>BBD</li>
        <li>BBD</li>
    </ol>
</div>

http://jsfiddle.net/1dab8xs7/1/

4

3 に答える 3

14

問題はcounter-resetプロパティではなく、コンテンツ プロパティとcounters()関数にあります。この関数は、ネストされた要素ごとに新しいインスタンスを自動的に追加します。これはネストされた要素には最適ですが、最初のレベルが他の要素にネストされているol場合はカウンター インスタンスも追加されます。ol

したがってcounter()、最初のレベルのol要素で関数を使用し、2 番目のレベルの要素でcounters()(「s」に注意してください) 関数を保持する必要があります。

ネストカウンターに関する MDN の詳細情報

ol {
    counter-reset: item;
    list-style: none;
}
li:before {
    counter-increment: item;
    content: counter(item)". ";
}
ol ol li:before{
  content: counters(item,".") " ";
}
<ol>
    <li>BBD</li>
    <li>BBD
        <ol>
            <li>BBD</li>
            <li>BBD</li>
            <li>BBD</li>
        </ol>
    </li>
    <li>BBD</li>
</ol>

<ol>
    <li>BBD</li>
    <li>BBD</li>
    <li>BBD</li>
</ol>

<div>
    <ol style="color:red;">
        <li>BBD</li>
        <li>BBD</li>
        <li>BBD</li>
    </ol>
</div>

@harryで提案されているように、疑似クラスまたは疑似要素olを使用して、要素の最初の子にカウンターのリセットを設定することもできます。例:li:first-childol::before

ol{
    list-style: none;
}
li:first-child{
    counter-reset: item;
}
/* or
ol:before {
    content: '';
    counter-reset: item;
}
*/
li:before {
    counter-increment: item;
    content: counters(item, ".")" ";
}
<ol>
    <li>BBD</li>
    <li>BBD
        <ol>
            <li>BBD</li>
            <li>BBD</li>
            <li>BBD</li>
        </ol>
    </li>
    <li>BBD</li>
</ol>

<ol>
    <li>BBD</li>
    <li>BBD</li>
    <li>BBD</li>
</ol>

<div>
    <ol style="color:red;">
        <li>BBD</li>
        <li>BBD</li>
        <li>BBD</li>
    </ol>
</div>

于 2015-07-21T13:21:28.267 に答える
1

をリセットする必要があり、次の ようにdiv
「リセットしない」必要があります。ol

<div style="color:red;counter-reset: item;">
    <ol style="color:red;counter-reset: none;" id="test">
        <li>BBD</li>
        <li>BBD</li>
        <li>BBD</li>
    </ol>
</div>
于 2015-07-21T13:09:04.440 に答える