如何为两个元素保持相同的 css 计数器值

问题描述

我需要根据某些属性值或类为两个元素显示相同的 CSS 计数器值。例如：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>CSS Counter</h1>
<h2>Point A</h2>
<h2>Point B</h2>
<h2 class="a">Point C</h2>
<h2>Point D</h2>
<h2>Point E</h2>
<h2 class="a">Point C</h2>
<h2>Point F</h2>
</html>

这是当前输出

是否有可能具有相同类 a 的 h2 元素在它们前面具有相同的计数，即两个点 C 在它们前面都有第 3 部分。这是所需的输出

是否可以使用 css 和 html 来实现？

解决方法

您可以手动通过重置特定类来更改计数器：

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

.a{ 
  color:red;
}

h2.mcount::before {
  counter-reset: section 2; 
}

<h1>CSS Counter</h1>
<h2>Point A</h2>
<h2>Point B</h2>
<h2 class="a a">Point C</h2>
<h2>Point D</h2>
<h2>Point E</h2>
<h2 class="a mcount">Point C</h2>
<h2>Point F</h2>

css-counter html