如何用CSS计数器设计有序列表的样式

尼耳多
228 阅读3分钟

简介

这是一个我时常发现的情况。我想要一个有序的列表，而且我希望它是漂亮的。

因为语义学是很重要的，所以我伸手去拿可靠的<ol> 标签。

<ol>
  <li>Stop</li>
  <li>Drop</li>
  <li>Roll</li>
</ol>
  1. 停止
  2. 放下
  3. 滚动

问题是，"子弹"（前缀数字）处于一个CSS选择器的死角。没有办法独立地设计它们的样式*!

我不是一个能接受缺乏活力的子弹的人。所以我做了一些调查，并找到了一个很棒的解决方案🎉。

计数器来拯救

CSS有一个非常漂亮的技巧来处理这种情况。它有一个内置的计数器机制。

下面是它的外观。

<ol>
  <li>Stop</li>
  <li>Drop</li>
  <li>Roll</li>
</ol>

让我们一步一步来看看。

  1. counter-increment 是一个CSS属性，每当它遇到一个新元素时，就会递增一个特定的 "计数器 "变量。我们把它放在每个有序列表项上。我把我的变量命名为 "松饼"，因为我喜欢松饼。
  2. 在每一个有序列表项之前，我都会显示当前的计数值。counter() ，可以认为是一个CSS函数，它返回一个特定计数器的值。在本例中，muffins 。
  3. 我用list-style: none 删除默认的不可定制的子弹，并指定一个计数器的重置。这确保了如果我在一个页面上有多个<ol> 元素，计数器将为每个元素重置。

之前？

这个技巧利用了伪元素的优势。CSS中的伪元素是一种在一个元素的主要子元素之前或之后注入一个假元素的方法。content ，让你指定什么应该进入该元素。

在这个例子中，我们加入了当前的计数，以及一些格式化的东西（句号和空格），来模拟默认的ol 值。你可以自由地进行试验。

造型设计

通过这个CSS，我们已经有效地重新创建了一个默认的<ol> 。不同的是，我们现在有一个CSS选择器，ol li:before ，我们可以用它来应用自定义样式。

下面是使用这个技巧后，这个博客上的有序列表的样子。

如何烘烤一个蛋糕

  1. 我认为你对干料做了些什么

  2. 搅拌器在这里发挥了作用

  3. 掰着手指头把所有东西合在一起

  4. 转移到烤箱

  5. 用牙签戳一下，以示有趣，然后上桌。

这不是一天两天的事，但我对整体效果非常满意

浏览器支持

CSS计数器给人的感觉就像下一代的功能，但实际上它们已经存在很久了。它们在Internet Explorer 8中得到了支持！!

使用这个属性没有罪恶感✨

这似乎是一个很大的麻烦!

CSS工作组同意--他们已经起草了一个新的::标记伪元素的草案，它可以让你直接将样式应用于列表中的子弹。

不幸的是，这只适用于Firefox和Safari。

另外：CSS计数器还有一个小把戏......

嵌套列表

真正酷的是：counter 有一个表弟，counters ，它对嵌套列表也有效。

请注意，在这个听起来很不错的课程中，编号是如何递归堆积的。

  1. 欢迎来到网络学校!
  2. HTML
    1. 标签到底是什么？
    2. 关于DOM的真相
  3. CSS
    1. 网络的墙纸
    2. 盒子模型的混乱
      1. 填充
      2. 边框
      3. 边框
    3. 特殊性服务

下面是为此所需的CSS。

ol {
  counter-reset: cupcake;
  padding-left: 32px;
}
ol li {
  counter-increment: cupcake;
}
ol li:before {
  content: counters(cupcake, '.') ' ';
  /* Whatever custom styles you want here */
  color: hotpink;
  font-weight: bold;
  font-family: cursive;
}

它非常相似，只是你用counters ，而不是counter ，并且你添加了一个 "中间 "间隔（在这种情况下，一个句号）。

让秩序回归

与ul 相比，ol 并没有得到很多人的喜爱。然而，人们却喜欢计算东西!有些东西没有加起来。

也许有了这个巧妙的技巧，我们最终会看到ol 得到应有的关注。

avatar
文章
阅读
粉丝