带有嵌套 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 的 divs 在同一个容器中。

.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 行。）

Answer 2

感谢您的帮助。它工作得更好，但现在当新的 h2 出现时，h3 计数器永远不会重置。这是我的完整 HTML 和 CSS:

<div class="container">
    <div class="article-text-unit">
        <h2><span>Hauptkapitel h2</span></h2>
        <div>
            <p>Sed sit amet elit scelerisque, tempor dui non, pharetra augue. Mauris fringilla sem sed magna molestie dignissim.</p>
        </div>
    </div>
    <div class="article-text-unit">
        <h3><span>Unterkapitel h3</span></h3>
        <div>
            <p>Sed sit amet elit scelerisque, tempor dui non, pharetra augue. Mauris fringilla sem sed magna molestie dignissim.</p>
        </div>
    </div>
    <div class="article-text-unit">
        <h3><span>Unterkapitel h3</span></h3>
        <div>
            <p>Sed sit amet elit scelerisque, tempor dui non, pharetra augue. Mauris fringilla sem sed magna molestie dignissim.</p>
        </div>
    </div>
    <div class="article-text-unit">
        <h2><span>Hauptkapitel h2</span></h2>
        <div>
            <p>Sed sit amet elit scelerisque, tempor dui non, pharetra augue. Mauris fringilla sem sed magna molestie dignissim.</p>
        </div>
    </div>
    <div class="article-text-unit">
        <h3><span>Unterkapitel h3</span></h3>
        <div>
            <p>Sed sit amet elit scelerisque, tempor dui non, pharetra augue. Mauris fringilla sem sed magna molestie dignissim.</p>
        </div>
    </div>
    <div class="article-text-unit">
        <h3><span>Unterkapitel h3</span></h3>
        <div>
            <p>Sed sit amet elit scelerisque, tempor dui non, pharetra augue. Mauris fringilla sem sed magna molestie dignissim.</p>
        </div>
    </div>
    <div class="article-text-unit">
        <h4><span>Unterkapitel h4</span></h4>
        <div>
            <p>Sed sit amet elit scelerisque, tempor dui non, pharetra augue. Mauris fringilla sem sed magna molestie dignissim.</p>
        </div>
    </div>
    <div class="article-text-unit">
        <h4><span>Unterkapitel h4</span></h4>
        <div>
            <p>Sed sit amet elit scelerisque, tempor dui non, pharetra augue. Mauris fringilla sem sed magna molestie dignissim.</p>
        </div>
    </div>
    <div class="article-text-unit">
        <h5><span>Unterkapitel h5</span></h5>
        <div>
            <p>Sed sit amet elit scelerisque, tempor dui non, pharetra augue. Mauris fringilla sem sed magna molestie dignissim.</p>
        </div>
    </div>
    <div class="article-text-unit">
        <h5><span>Unterkapitel h5</span></h5>
        <div>
            <p>Sed sit amet elit scelerisque, tempor dui non, pharetra augue. Mauris fringilla sem sed magna molestie dignissim.</p>
        </div>
    </div>
    <div class="article-text-unit">
        <h3><span>Unterkapitel h3</span></h3>
        <div>
            <p>Sed sit amet elit scelerisque, tempor dui non, pharetra augue. Mauris fringilla sem sed magna molestie dignissim.</p>
        </div>
    </div>
    <div class="article-text-unit">
        <h2><span>Hauptkapitel h2</span></h2>
        <div>
            <p>Sed sit amet elit scelerisque, tempor dui non, pharetra augue. Mauris fringilla sem sed magna molestie dignissim.</p>
        </div>
    </div>
</div>

和SASS：

body {
  counter-reset: counterh2;
}

.container .article-text-unit:first-child {
  counter-reset: counterh3;
}

h3 {
  counter-reset: counterh4;
}

h4 {
  counter-reset: counterh5;
}

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

带有嵌套 div 的 SCSS 计数器

SCSS counter with nested divs

html

css

sass

css-counter