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

如果设置为display: none;，如何不排除元素的计数？使用CSS计数器计算隐藏的元素

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>

来源

2016-04-13 Alexander Hein

你可能想看看在这个答案 - http://stackoverflow.com/questions/25766110/css-counter-on-hidden-submenu。你不能使用'display：none'来制作CSS计数器元素（[this]（https://www.w3.org/TR/CSS2/generate.html）是旧规格，但你可以在Section 12.4.3）。您必须以其他方式隐藏元素。 – Harry

由于.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-13 13:35:30

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

回答

相关问题