跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
counter-increment

3篇文章
{
,

}
文章的直接链接 使用 CSS 计数器显示当前步骤
counter-increment counters

使用 CSS 计数器显示当前步骤

假设您有五个按钮。每个按钮都是一个步骤。如果您点击第四个按钮,您就在 5 个步骤中的第 4 步,并且您想显示它。

这种计数和显示可以硬编码,但这……

Avatar of Jan Enning
Jan Enning 于 2020年7月17日
文章的直接链接 如何反转 CSS 自定义计数器
counter-increment counters lists

如何反转 CSS 自定义计数器

我需要一个博客文章的编号列表,以最后一个/最高的为首,然后从那里向下排列。像这样

5. Post Title
4. Post Title
3. Post Title
2. Post Title
1. Post Title

但是上面……

Avatar of Etinosa Obaseki
Etinosa Obaseki 于 2020年6月11日
文章的直接链接 counter-increment
counter-increment counters lists

counter-increment

有序列表并不是唯一可以自动编号的元素。由于各种与计数器相关的属性,任何元素都可以。

<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: 
……
Avatar of Sara Cope
Sara Cope 于 2019年1月31日

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费额度!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告
  • 联系我们
社交媒体
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.