Question

根据css规范（http://www.w3.org/TR/CSS21/generate.html#scope），重置计数器会自动创建一个新的计数器实例。

我正在尝试解决此问题，以便处理在重置时不考虑div树结构的全局计数器。

见下面的例子

css

＆＃13;

body {
    counter-reset: counter1 0 counter2 0;
}

.counter1 {
    counter-increment: counter1;
    counter-reset: counter2 0;
}

    .counter1:before {
        content: counter(counter1);
    }

.counter2 {
    counter-increment: counter2;
}

    .counter2:before {
        content: counter(counter1) ". " counter(counter2);
    }

＆＃13;

<body>
    <div>
        <div class="counter1">Section 1</div>
        <div class="counter2">SubItem 1.1</div>
    </div>
    <div>
        <div class="counter2">SubItem 1.2</div>
    </div>
    <div>
        <div class="counter2">SubItem 1.3</div>
    </div>
    <div>
        <div class="counter1">Section 2</div>
        <div class="counter2">SubItem 2.1</div>
    </div>
    <div>
        <div class="counter2">SubItem 2.2</div>
    </div>
</body>

＆＃13;

有什么想法吗？

Answer 1

你需要这样的东西http://jsfiddle.net/9x492j2m/

您可以将元素放在ul列表中

<ul class="counter1">
    <li>Section 1
        <ul class="counter2">
            <li>SubItem 1.1</li>
            <li>SubItem 1.2</li>
            <li>SubItem 1.3</li>
        </ul>
    </li>
    <li>Section 2
        <ul class="counter2">
            <li>SubItem 2.1</li>
            <li>SubItem 2.2</li>
            <li>SubItem 2.3</li>
            <li>Subitem 2.4</li>
        </ul>
    </li>
</ul>

然后是CSS

.counter1 {
    counter-reset: counter1;   
    list-style: none;
}
.counter1 li:before {
    content: counter(counter1);
    counter-increment:counter1;
    color: #fff;
    background: red;    
}
.counter2 {
    counter-reset: counter2;    
}
.counter2 li:before {
    content: counter(counter1)". " counter(counter2);
    counter-increment:counter2;
}

Css全球专柜

1 个答案: