html - 带有嵌套 div 的 SCSS 计数器

Question

我对 CSS 和计数器有疑问。第二个 h3 应该有数字“1.2”，但在我的例子中它总是有数字“1.1”。

这是 h3 周围的 div 的问题还是我的计数器重置有误？感谢您的帮助! :)

我有以下 HTML:

body {
  counter-reset: counterh2;
}

h2 {
  counter-reset: counterh3;
}

h3 {
  counter-reset: counterh4;
}

h4 {
  counter-reset: counterh5;
}

.container {
  >h2::before,
  >.div>h2::before {
    content: counter(counterh2, decimal) ". ";
    counter-increment: counterh2;
  }
  >h3::before,
  >.div>h3::before {
    content: counter(counterh2, decimal) "." counter(counterh3, decimal) ". ";
    counter-increment: counterh3;
  }
  >h4::before,
  >.div>h4::before {
    content: counter(counterh2, decimal) "." counter(counterh3, decimal) "." counter(counterh4, decimal) ". ";
    counter-increment: counterh4;
  }
  >h5::before,
  >.div>h5::before {
    content: counter(counterh2, decimal) "." counter(counterh3, decimal) "." counter(counterh4, decimal) "." counter(counterh5, decimal) ". ";
    counter-increment: counterh5;
  }
}

<div class="container">
  <div class="div">
    <h2><span>Should be 1</span></h2>
  </div>
  <div class="div">
    <h3><span>Should be 1.1</span></h3>
  </div>
  <div class="div">
    <h3><span>Should be 1.2</span></h3>
  </div>
</div>

Answer 1

重置 h3 计数器的 h2 与 h3 位于不同的容器中。这意味着 h3counter 将处于与 h3 不同的上下文中。

解决方案:不要在 h2 中重置计数器，而是在其父 .div 中重置计数器，它与包含 h3 的 div 在同一容器中。

.container .div:first-child {
  counter-reset: counterh3;
}

body {
  counter-reset: counterh2;
}

.container .div:first-child {
  counter-reset: counterh3;
}

h3 {
  counter-reset: counterh4;
}

h4 {
  counter-reset: counterh5;
}

.container>h2::before,
.container>.div>h2::before {
  content: counter(counterh2, decimal) ". ";
  counter-increment: counterh2;
}

.container>h3::before,
.container>.div>h3::before {
  content: counter(counterh2, decimal) "." counter(counterh3, decimal) ". ";
  counter-increment: counterh3;
}

.container>h4::before,
.container>.div>h4::before {
  content: counter(counterh2, decimal) "." counter(counterh3, decimal) "." counter(counterh4, decimal) ". ";
  counter-increment: counterh4;
}

.container>h5::before,
.container>.div>h5::before {
  content: counter(counterh2, decimal) "." counter(counterh3, decimal) "." counter(counterh4, decimal) "." counter(counterh5, decimal) ". ";
  counter-increment: counterh5;
}

<div class="container">
  <div class="div">
    <h2><span>Should be 1</span></h2>
  </div>
  <div class="div">
    <h3><span>Should be 1.1</span></h3>
  </div>
  <div class="div">
    <h3><span>Should be 1.2</span></h3>
  </div>
</div>

(注意:我不得不为这个片段翻译 SCSS，因为片段不做 SCSS，但你明白了。你需要替换的是我上面给出的第一行 CSS。)