0

I have a problem with CSS and counter. The second h3 should have the number "1.2" but in my case it has always the number "1.1".

Is this a problem with the divs around the h3 or did I make a mistake with the counter-reset? Thanks for your help! :)

I have the following 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>

4

2 回答 2

0

谢谢你的帮助。它工作得更好，但现在 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;
  }
}
于 2018-01-31T07:08:06.977 回答
0

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

于 2018-01-30T21:08:42.647 回答