DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
有序列表不是唯一可以自动编号的元素。借助各种与计数器相关的属性,任何元素都可以。
<body>
<section></section>
<section></section>
<section></section>
<section></section>
</body>
body {
counter-reset: my-awesome-counter;
}
section {
counter-increment: my-awesome-counter;
}
section:before {
content: counter(my-awesome-counter);
}
每个 <section>
将分别以“1”、“2”、“3”或“4”开头。
您可以通过逗号分隔计数器函数来控制计数器的样式。例如,要使它们使用罗马数字
section:before {
content: counter(my-awesome-counter, upper-roman);
}
演示
更多信息
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
2+ | 3.1+ | 任何 | 9.2+ | 8+ | 待定 | 待定 |
那家伙没付钱就开车回家了!哈哈
嗯,看起来 Android 和 iOS 也具有良好的支持。
caniuse.com
无需脚本,我们可以使用 counter-increament 更改 li 的数量
http://codepen.io/nakati/pen/lhzKb
我稍微修改了一下你的代码,现在它可以正常工作了。
http://codepen.io/anon/pen/ZYGrJv
您必须将 counter-increment 属性从 li:before 移动到 li 本身。此外,在 counter-reset 属性中,不能使用逗号,只能使用空格来分隔值。
@transGLUKator 谢谢你的说明。
但是你能解释一下为什么文章演示中 counter reset 值用逗号分隔吗?
是否可以像这样使用它
我无法使其工作,如果也能以这种方式工作就好了。
我几乎可以肯定“counter”只在伪元素(例如 ::before、::after)的“content”属性中起作用。
是否有任何技术或建议可以将计数器制作成可点击的链接?我看不出如何做到这一点,但有人要求我在一个已经建立的设计中这样做。
难道你不能把它包裹在一个锚标记中吗?
<a class="counter-link"><a/>
然后在你的 css 中,尝试类似的东西..
我遇到了一个问题,我的代码是这样的
这在页面加载时没有问题。我遇到的问题是,每当我将鼠标悬停在 .MarkerLabel 上时,它似乎会在 .MarkerLabel 内部插入一个额外的 ::before 伪元素。所以我最终得到了具有计数器值 1 的原始 ::before 伪元素,然后当我悬停时,会出现第二个伪元素,其计数器值(在本例中)为 54,就像它在悬停时重新开始一样。对我来说毫无意义。还有其他人遇到过 :hover 和 CSS 计数器的问题吗?
这是 Google Maps API 渲染两组标记的问题。所以我只是将计数器限制在第一组 .MarkerLabels 上。
这是一个 YouTube 视频教程,我用例子详细解释了这一点。 :)
https://goo.gl/Jw2TDD
使用多个 CSS 计数器时有一个很大的未记录方面,这个笔演示了 https://codepen.io/A2D/pen/WdKjRa
这既不是我期望它工作的方式,也不是我认为它应该工作的方式。