css - 隐藏子菜单上的 CSS 计数器

Question

我正在尝试使用 nested 创建一个下拉菜单<ul>，每个菜单都<li>显示一个使用 CSS Counters 生成的数字。

display:none未悬停时隐藏子菜单。

我的问题是当元素display设置为none.

你知道防止这种情况的 CSS 属性吗？

如果我替换display: none为visibility: hidden，它可以工作，但我不确定将它用于我的菜单是否很好，是否有任何陷阱？

score 4 · Accepted Answer

您可以display: none通过将设置为 0px 来模仿（隐藏）行为font-size，这将使元素被 counter 属性计数。

.hidden{
    font-size: 0px;
}

或者，上述更复杂的版本（Hashem Qolami在评论中提到）

.hidden{
    font: 0/0 a; 
    visibility: hidden;
}

注意： visibility: hidden也可以，但它会在输出中留下相当于一行高度的空间。

1 回答 1