Question

如果元素设置为display: none;，我怎能不排除元素？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

当.hidden给出元素display: none时，这就是为什么计数器无法正常工作，因为它实际上不在dom中。

我可能会添加一个类（只需要.hidden，但需要display: none）：

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

这是一个有效的例子：

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

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

1 个答案: