使用 CSS 个计数器计算隐藏元素

Question

如果某个元素已设置 display: none;，我如何才能不将其排除在计数范围之外？

body {
  counter-reset: section;
}
.variant--name::before {
  counter-increment: section;
  content: counter(section) ": ";
}

.hidden {
  display: none;
}

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

<div class="variant--group hidden">
<h3 class="variant--name">variant</h3>
</div>

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

Answer 1

由于 .hidden 给出了元素 display: none 这就是计数器无法工作的原因，因为它实际上不在 dom.

中

我可能会添加一个 class（以防万一 .hidden 其他地方需要 display: none）：

.hiddenButAccessible {
  position: absolute;
  left: -9999px;
  max-height: 0px;
  overflow: hidden;
  opacity: 0;
}

这是一个工作示例：

http://codepen.io/sonnyprince/pen/oxqzzL

使用 CSS 个计数器计算隐藏元素

Count hidden elements with CSS Counters

css

css-counter