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

重置h3counter的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。）

Answer 2

感谢您的帮助。它运行得更好，但现在h3计数器在新的h2出现时永远不会重置。这是我的完整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计数器

2 个答案: