CSS计数器不递增答案

【问题标题】：CSS counter not incrementingCSS计数器不递增
【发布时间】：2018-08-26 03:20:09
【问题描述】：

我的示例中的 CSS 计数器不会增加，尽管我已指定它这样做。我在这里阅读了一些关于可能导致此问题的元素嵌套级别的问题，但在我的情况下，所有元素都处于同一级别。

MWE

<!DOCTYPE html>
<head>
  <style>
  body {
    counter-reset: firstCounter;
    counter-reset: secondCounter;
  }

  h2.heading::before {
    counter-increment: firstCounter;
    content: counter(firstCounter)"\00a0";
  }

  h3.issue::before {
    counter-increment: secondCounter;
    content: counter(secondCounter)"\00a0";
  }
  </style>
</head>

<body>
  <h1>The Book</h1>

  <h2 class="heading">First Heading</h2>
    <h3 class="issue">The Issue of Drinking</h3>
    <h3 class="issue">The Issue of Drinking Too Much</h3>

  <h2 class="heading">Second Heading</h2>
    <h3 class="issue">The Issue of Driving</h3>
    <h3 class="issue">The Issue of Drunk Driving</h3>

</body>
</html>

结果

标题“第二标题”的计数器必须为“2”。在 CSS 中交换 body 标记下的 counter-reset 的顺序会导致相同的问题，但会与受影响的标题相反。

CodePen Link

【问题讨论】：

哈立德你好。您应该将 css 中的 body 标签更改为：body { counter-reset: firstCounter secondCounter; } 这应该可以解决问题。

标签： css css-counter

【解决方案1】：

问题在于counter-increment属性的重复定义：

body {
  counter-reset: firstCounter;
  counter-reset: secondCounter;
}

第二个定义覆盖第一个；要增加多个计数器，您只需使用这些计数器的空格分隔列表：

body {
  counter-reset: firstCounter secondCounter;
}

名称：反增量

值：[ ? ]+ |没有

<custom-ident> <integer>?

元素改变其上一个或多个计数器的值。如果元素上当前没有给定名称的计数器，则该元素会创建一个具有给定名称的新计数器，其起始值为 0（尽管它可能会立即将该值设置或增加为不同的值）。

body {
  counter-reset: firstCounter secondCounter;
}

h2.heading::before {
  counter-increment: firstCounter;
  content: counter(firstCounter)"\00a0";
}

h3.issue::before {
  counter-increment: secondCounter;
  content: counter(secondCounter)"\00a0";
}

/* irrelevant, just for the sake of easier visuals in the answer: */

h2 {
  border-top: 2px solid #aaa;
}

h3 {
  margin-left: 2em;
}

<h1>The Book</h1>

<h2 class="heading">First Heading</h2>
<h3 class="issue">The Issue of Drinking</h3>
<h3 class="issue">The Issue of Drinking Too Much</h3>

<h2 class="heading">Second Heading</h2>
<h3 class="issue">The Issue of Driving</h3>
<h3 class="issue">The Issue of Drunk Driving</h3>

参考：

CSS Lists and Counters。

【讨论】：