gpt4 book ai didi

html - Css 全局计数器

转载 作者:搜寻专家 更新时间:2023-10-31 21:49:35 25 4
gpt4 key购买 nike

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

有什么想法吗?

最佳答案

你需要这样的东西吗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 - Css 全局计数器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25937699/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com