3

要素が設定されている場合、要素をカウントから除外するにはどうすればよい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>

4

1 に答える 1

5

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

于 2016-04-13T13:35:30.087 に答える