CSS 全局计数器答案

【问题标题】：Css global countersCSS 全局计数器
【发布时间】：2014-11-14 06:31:13
【问题描述】：

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

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

见下例

css

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);
    }

<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>

有什么想法吗？

【问题讨论】：

每个子项是否总是出现在自己的外部 div 中，可以选择带有节标题？换句话说，每个外部 div 是否只包含 1) 标题后跟子项或 2) 单个子项？
没有。我可以在同一个 div 中有 2 个子项。实际上我真的很想让计数器独立于 dom 嵌套结构（当然除了在树中出现的顺序）
我认为这种行为没有基于 CSS 的解决方法。好像没有办法改变它。
谢谢。我想我必须在服务器端或使用 javascript 处理它。

标签： html css

【解决方案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;
}

【讨论】：

我认为它不适合我。在我的用例中，html 元素缩进与预期的编号结构不对应。例如，子项可能出现在一个既不是子项也不是主父项的兄弟节点中。