Question

尽管我已指定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>

结果

标题“ Second Heading”的计数器必须为“ 2”。在CSS的counter-reset标签下交换body的顺序会导致相同的问题，但在哪方面却是相反的标题受到影响。

CodePen Link

Answer 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。

CSS计数器未递增

1 个答案: