CSS计数器意外重置“当嵌套时”
CSS计数器是一种CSS特性，用于创建计数器并对元素进行自动计数。它可以用于各种场景，例如列表、章节编号、序号等。然而，当嵌套使用计数器时，可能会出现意外的重置问题。
当嵌套使用计数器时，子元素的计数器会继承父元素的计数器，但是如果在子元素的样式中重置了计数器，那么父元素的计数器也会被重置，导致计数器从头开始计数。
为了避免这种意外重置的问题，可以使用CSS中的counter-reset属性来重置计数器。在嵌套的场景中，需要在子元素样式中使用counter-reset属性来重置父元素的计数器。具体做法是，在子元素样式中使用相同的计数器名称，并将计数器值设置为父元素的计数器值。
以下是一个示例，展示了如何避免CSS计数器意外重置的问题：
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-reset: subsection;
counter-increment: section;
content: "Section " counter(section) ". ";
}
h3::before {
counter-increment: subsection;
content: "Section " counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>Introduction</h1>
<h2>Subsection</h2>
<h3>Subsection 2</h3>
<h1>Another Introduction</h1>
<h2>Subsection</h2>
</body>
</html>在上面的示例中，我们创建了一个名为"section"的计数器，并通过counter-increment属性对其进行递增操作。在<h1>标签中，我们使用了计数器，并通过::before伪元素在标题前添加计数器内容。在<h2>和<h3>标签中，我们分别使用了计数器，并且在<h2>中通过counter-reset属性重置了"subsection"计数器。
这样做的效果是，当<h2>标签出现时，"section"计数器会继续递增，但是"subsection"计数器会被重置为0。这样就避免了意外的计数器重置问题。
推荐的腾讯云产品：腾讯云云服务器（CVM） 腾讯云云服务器（CVM）是一种弹性计算云服务，提供了可调整配置、可扩展的计算能力。您可以根据业务需求选择不同配置的云服务器，并且可以随时调整配置以满足您的需求。腾讯云云服务器支持多种操作系统，提供了稳定、安全、高性能的服务器环境。
产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
1回答
我使用css计数器来格式化wiki上的一些页面(我可以在wiki页面中添加CSS )。我使用计数器对我的头进行编号。 这是一段有效的代码： ? <!我不明白为什么在离开.hzlayout分区(或进入第二个.hzlayout分区)时，h2counter会被重置？ 提前感谢您的帮助。
浏览 9提问于2021-05-07得票数 0
回答已采纳
2回答
我想修复我的CSS计数器，这样它就会在每次出现OL或UL顶级父级时重置。嵌套的OL不应重置计数器，但应仅针对顶级OL或UL的每个实例重置计数器。可能是问题所在的css： counter-reset: item;
}
浏览 1提问于2013-01-19得票数 0
回答已采纳
通常在列表中使用CSS计数器时，。 </ol></ol>Chrome和Safari按预期呈现，但在FF中，列表A呈现为：列表B被表示为：换句话说，当浏览两级列表时，FF会跟踪：
浏览 1提问于2019-09-03得票数 2
回答已采纳
我们不希望MYSQL在意外重启时重置自动增量。虽然在删除MYSQL时不要重置自动增量计数器，我们对此感到高兴，但偶尔MYSQL重启，计数器被重置为max(id) +1。我们想避免这种情况，有没有方法可以告诉MYSQL保持自动增量计数器到重启之前的位置。
浏览 17提问于2016-08-05得票数 1
1回答
如何解释无状态服务中打开的会话
、、、、
我的经典版本是编写本地windows perf计数器：+1在会话打开，-1在会话关闭。如果服务意外死亡，则新实例在开始时重置计数器。一个远程监测服务正在从所有实例中收集计数器，并显示总数和平均值。我的新服务使用将值推送到远程监视服务的诊断库写入计数器。
如果服务意外死亡，我不知道如何重置计数器。我唯一的想法是开始收集每个服务的心跳，并在服务终止时重新设置计数器，但它似乎过于设计了。
浏览 4提问于2016-12-15得票数 0
回答已采纳
当我想用一个类重置一个CSS计数器时，我遇到了一个问题。我知道这是一个作用域问题，但当我试图更改代码以使其正常工作时……不是这样的。我总是在尝试重置时启动一个新的计数器。
浏览 18提问于2020-10-29得票数 1
我正在使用css中的自定义计数器进行打印。但是，当h1标记位于自定义组件内时，计数器似乎会重置。这是一个bug吗？示例: css：counter-increment: countH1;html：<h1>hello</h1>css计数器与自定义组件不兼容吗？
约翰。
浏览 32提问于2018-07-25得票数 1
我使用CSS3D-transform rotateY来翻转带有css过渡的div。我希望图像翻转一定的次数:当转换结束时，我再次触发它，直到达到某个计数器值。我想做的是:当rotateY达到360度时，我想将它重置为0以重新开始相同的旋转。它不是非常图形化，但如果你点击开始，然后重置，它
浏览 3提问于2016-10-25得票数 1
1回答
我试图使用嵌套的<ul>制作下拉菜单，每个<li>都显示一个用CSS计数器生成的数字。您知道CSS属性可以防止这种情况发生吗？
浏览 3提问于2014-09-10得票数 3
回答已采纳
2回答
当队列为空时，信号量设置为零。生产者将消息放入队列并递增计数器，以便使用者等待队列中的项。
有一种情况需要清除队列。这意味着信号量计数器必须重置为0。不幸的是，我没有在MSDN上找到重置计数器的选项。当计数器不为零时，使用WaitForSingleObject()会产生竞赛条件，因此似乎不是一种选择。在Windows中还有其他方法来重置信号量计数器吗？
浏览 1提问于2015-05-03得票数 2
回答已采纳
1回答
谈到有关StatsD的计数器，它的工作方式是您一直张贴一个计数器的值。每当应用程序收到对StatsD守护进程的请求时，都会使用StatsD。守护进程有一个刷新间隔集，当它在此期间将此计数器的聚合推送到外部后端时。此外，它还将计数器重置为0。
试图把这个映射到Flink计数器。Flink计数器只有inc和dec方法，所以在报告时间到来之前，app可以调用inc或dec来更改计数器的值。在编写本报告<e
浏览 2提问于2020-01-23得票数 0
在某个文档中，我想让“定理”和“分段”这两个计数器成为一件事。有什么想法吗？
编辑:由于数学部分可能令人困惑，我将问题重新表述为以下内容，没有任何此类引用。我使用某个计数器"mycounter“来计数，这个计数器是在某个包中预定义的。当子部分增加时，我希望"mycounter“也增加。反之亦然。当子部分被重置时，我希望"mycounter“被重置。这就是我希望通过确定两个计数器来实现的。
浏览 1提问于2010-07-08得票数 0
回答已采纳
所以我有这个脚本，它是一个计数器，跟随着一个无限的动画。每次迭代结束时，计数器都会重置为0。在倒数第四行，当计数器达到20时，我试图调用x.classList.toggle()来更改css。当我用classList.toggle ()函数替换警告时，它可以工作，但没有类'doton‘被添加到'dot1’中。我遗漏了什么？
浏览 1提问于2014-03-01得票数 1
1回答
H1 2.2 H2I. H1 b) H2h2.num:before { counter-incrementh1.al:before {
content:
浏览 18提问于2018-01-08得票数 0
回答已采纳
当Qt中的屏幕被触摸时，有什么方法接收吗？每当触摸屏被触摸时，我都需要将计数器重置为0。
我有一个函数systemIdleControl，它将计数器重置为零。因此，当我触摸触摸屏时，它应该调用systemIdleControl。
浏览 2提问于2011-11-28得票数 1
回答已采纳
我在我们的应用程序中有一个计数器，它在进程启动时随时增加。它有很多标签，其中包括荚名和顾客名。有人可能会说，它有一个相当高的基数，我们计算的事情可以发生低至3次每24小时间隔和客户多达数百次每24小时和客户。sum(application_thing_added) - sum(application_thing_added offset 24h)
这给了我正确的答案，
浏览 8提问于2022-11-11得票数 0
2回答
我从这个网站得到这个插件，我设法运行倒计时，但当我点击一个按钮并重置它时，我有问题停止倒计时。我看过一些关于它的文章，但不能把它和我的案例联系起来。如果我再次调用该函数，它将显示4(旧计数器) --> 9(新计数器) -->3 (旧计数器) --> 8(新计数器)...在一起就是一团糟。当我点击一个按钮时，我所需要的就是停下来重置计数器。css('color','#09
浏览 0提问于2012-10-24得票数 0
回答已采纳
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
腾讯云开发者
