问CSS计数器跨元素行为
EN

Stack Overflow用户

提问于 2017-01-02 07:28:23

回答 0查看 1.1K关注 0票数 2

我试图掌握CSS计数器的诀窍，但似乎我不能理解它。

下面是我举的一个最小的例子：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    counter-reset: chapter;
    counter-reset: section;
    counter-reset: theorem;
}

.outline-1 {
    counter-increment: chapter ;
}

span[class^="section-number"] {
    counter-increment: section ;
}
.theorem:before {
    counter-increment: theorem;
    content: "Theorem " counter(chapter) "." counter(section) "." counter(theorem) ": ";
}

</style>
</head>
<body>

<div id="outline-container-sec-1-2" class="outline-1">
<h3 id="sec-1-2"><span class="section-number-1">1.2</span> Basic</h3>
<div class="theorem"> Very important theorem! </div></div>

<div id="outline-container-sec-1-2" class="outline-1">
<h3 id="sec-1-2"><span class="section-number-2">1.2</span> Some  Combinatorics</h3>
<div class="theorem"> Very important theorem! </div></div>

</body>
</html>

我得到的结果是：

1.1基础版

定理1.0.1:非常重要的定理！

1.2一些组合学

定理2.0.2:非常重要的定理！

为什么第二个计数器保持在0？为什么我可以计算span元素？

css-counter

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41419927

复制

相似问题

问CSS计数器跨元素行为
EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS计数器跨元素行为EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS计数器跨元素行为
EN