CSS counter-сброс во вложенном списке

Я борюсь с counter-reset когда ol находится в 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/

9
css css-counter css3

3 ответов

ваша проблема не с counter-reset свойство, оно с свойством содержания и

9

сброс 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>
1

один из способов обойти это - добавить класс (так как вы не можете выбрать элемент на основе того, что является его родителем) и исключить его из первоначального выбора с помощью :not псевдо-класс:

HTML-код: 

<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 class="x" style="color:red;">
        <li>BBD</li>
        <li>BBD</li>
        <li>BBD</li>
    </ol>
</div>

CSS: 

ol:not(.x) {
    counter-reset: item;
    list-style: none;
}
ol:not(.x) li:before {
    counter-increment: item;
    content: counters(item, ".")" ";
}

по состоянию на это JSFiddle

0