首页 / 技术问答 / Html问答列表 / 问答详情

Html 如何正确使用counter()、counter—increment()和counter—reset()嵌套标题

当在初始声明和重置之间添加div时，我对counter-reset()有一些问题.

我最初有这样的东西，标题直接在numberedHeadings类下面:

.numberedHeadings {
  counter-reset: heading1counter 0 heading2counter 0 heading3counter 0 heading4counter 0;
}

.numberedHeadings h1.chapterHeading {
  counter-reset: heading2counter 0 heading3counter 0 heading4counter 0;
  counter-increment: heading1counter;
  margin-top: 24px;
  margin-bottom: 12px;
}

.numberedHeadings h1.chapterHeading::before {
  display: inline-block;
  padding-right: 8px;
  content: counter(heading1counter) " ";
}


/* Repeat similar adjustments for h2, h3, and h4 */


/* Example for h2 */

.numberedHeadings h2.chapterHeading {
  counter-reset: heading3counter 0 heading4counter 0;
  counter-increment: heading2counter;
  margin-top: 24px;
  margin-bottom: 12px;
}

.numberedHeadings h2.chapterHeading::before {
  display: inline-block;
  padding-right: 8px;
  content: counter(heading1counter) "." counter(heading2counter) " ";
}
<div class="numberedHeadings">
  <h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
    Heading one (should be 1)
  </h1>
  <h2 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
    Heading two (should be 1.1)
  </h2>
  <h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
    Heading three (should be 2)
  </h1>
  <h2 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
    Heading four (should be 2.1)
  </h2>
  <h2 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
    Heading five (should be 2.2)
  </h2>
  <h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
    Heading 6 (should be 3)
  </h1>
  <h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
    Heading 7 (should be 4)
  </h1>
  <h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
    Heading 8 (should be 5)
  </h1>
</div>

现在我需要在每个heading标签周围添加一个额外的div个容器，如下所示:

.numberedHeadings {
  counter-reset: heading1counter 0 heading2counter 0 heading3counter 0 heading4counter 0;
}

.numberedHeadings h1.chapterHeading {
  counter-reset: heading2counter 0 heading3counter 0 heading4counter 0;
  counter-increment: heading1counter;
  margin-top: 24px;
  margin-bottom: 12px;
}

.numberedHeadings h1.chapterHeading::before {
  display: inline-block;
  padding-right: 8px;
  content: counter(heading1counter) " ";
}


/* Repeat similar adjustments for h2, h3, and h4 */


/* Example for h2 */

.numberedHeadings h2.chapterHeading {
  counter-reset: heading3counter 0 heading4counter 0;
  counter-increment: heading2counter;
  margin-top: 24px;
  margin-bottom: 12px;
}

.numberedHeadings h2.chapterHeading::before {
  display: inline-block;
  padding-right: 8px;
  content: counter(heading1counter) "." counter(heading2counter) " ";
}
<div class="numberedHeadings">
  <div class="settingsControlGroup">
    <h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading one (should be 1)
    </h1>
  </div>
  <div class="settingsControlGroup">
    <h2 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading two (should be 1.1)
    </h2>
  </div>
  <div class="settingsControlGroup">
    <h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading three (should be 2)
    </h1>
  </div>
  <div class="settingsControlGroup">
    <h2 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading four (should be 2.1)
    </h2>
  </div>
  <div class="settingsControlGroup">
    <h2 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading five (should be 2.2)
    </h2>
  </div>
  <div class="settingsControlGroup">
    <h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading 6 (should be 3)
    </h1>
  </div>
  <div class="settingsControlGroup">
    <h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading 7 (should be 4)
    </h1>
  </div>
  <div class="settingsControlGroup">
    <h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading 8 (should be 5)
    </h1>
  </div>
</div>

然而，我看到，当这一点完成时，虽然counter-increment()正在被解雇，但counter-reset()没有.

推荐答案

注意:这里的代码片段似乎在Edge/Chrome(Windows 10测试)和Safari(IOS 16测试)上正常工作.在Firefox(124 Windows10)上无法正常工作.

.....................................................................

使计数器复位/递增一级.

CSS :has可以用于感测涉及哪个计数器.

.numberedHeadings {
  counter-reset: heading1counter 0 heading2counter 0 heading3counter 0 heading4counter 0;
}

.numberedHeadings .settingsControlGroup:has(h1.chapterHeading) {
  counter-reset: heading2counter 0 heading3counter 0 heading4counter 0;
  counter-increment: heading1counter;
  margin-top: 24px;
  margin-bottom: 12px;
}

.numberedHeadings h1.chapterHeading::before {
  display: inline-block;
  padding-right: 8px;
  content: counter(heading1counter) " ";
}


/* Repeat similar adjustments for h2, h3, and h4 */


/* Example for h2 */

.numberedHeadings .settingsControlGroup:has(h2.chapterHeading) {
  counter-reset: heading3counter 0 heading4counter 0;
  counter-increment: heading2counter;
  margin-top: 24px;
  margin-bottom: 12px;
}

.numberedHeadings h2.chapterHeading::before {
  display: inline-block;
  padding-right: 8px;
  content: counter(heading1counter) "." counter(heading2counter) " ";
}
<div class="numberedHeadings">
  <div class="settingsControlGroup">
    <h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading one (should be 1)
    </h1>
  </div>
  <div class="settingsControlGroup">
    <h2 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading two (should be 1.1)
    </h2>
  </div>
  <div class="settingsControlGroup">
    <h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading three (should be 2)
    </h1>
  </div>
  <div class="settingsControlGroup">
    <h2 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading four (should be 2.1)
    </h2>
  </div>
  <div class="settingsControlGroup">
    <h2 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading five (should be 2.2)
    </h2>
  </div>
  <div class="settingsControlGroup">
    <h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading 6 (should be 3)
    </h1>
  </div>
  <div class="settingsControlGroup">
    <h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading 7 (should be 4)
    </h1>
  </div>
  <div class="settingsControlGroup">
    <h1 id="id-7adcf781-0be8-4536-8dd9-89d4553850cf" class="chapterHeading">
      Heading 8 (should be 5)
    </h1>
  </div>
</div>

Html相关问答推荐

一次悬停可触发同一分区中的另一次悬停

R中的动态Webscraping

Flexbox嵌套div溢出

CURL邮箱中的图像不能调整其大小

天使17：令人惊叹的动画

使用Cypress循环遍历不一致的父对象

创建特定的CSS网格布局

使用不同字体对齐元素

目标第一个祖先标签的 XPath

在屏幕上每行 css 中的特定列居中

Angular MatBadge 在高于 99 时不显示完整数字

是否可以制作响应式 CSS 剪辑路径？

如何将内容放置在侧边栏旁边？

使用HTML和CSS构建简历网站.无法使body元素内的div元素跨越整个网站高度

使用 R 中的 rvest 包获取搜索结果的第一个链接

单击按钮时更改字体真棒图标

使用 rgba() 的 css 中的边框不透明度不起作用

使用 CSS flexbox 和溢出顶部而不是底部

如何在单击按钮时切换 Blazor 中的类？

绝对定位的 div 与另一个静态定位的 div 的边距顶部一起移动

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630