数字样式

如果您想在网站上按顺序对内容进行编号，有序列表 (<ol>) 就是您的最佳选择。 您也可能希望对这些数字进行样式设置。 奇怪的是，在 CSS 中对这些列表数字进行样式设置并不是一件容易的事。 值得庆幸的是，这也不是不可能的。 Roger Johansson 在 一篇教程 中展示了如何使用 :before 伪元素来实现，该元素可以将 counter 作为 content 属性的值。

但需要知道的是，应用编号计数器不仅限于有序列表。 例如，假设您想对常见问题解答列表中的问题和答案对进行编号。

您的标记将类似于此

<dl class="faq">

	<dt>How much wood would a wood chuck chuck if a wood chuck could chuck wood?</dt>
	<dd>1,000,000</dd>
	
	<dt>What is the air-speed velocity of an unladen swallow?</dt>
	<dd>What do you mean? An African or European swallow?</dd>
	
	<dt>Why did the chicken cross the road?</dt>
	<dd>To get to the other side</dd>
	
</dl>

每个新的 <dt> 元素都是一个新问题，因此我们应该在此应用编号。 它与以下代码一样简单

.faq {
	counter-reset: my-badass-counter;
}
.faq dt:before {
	content: counter(my-badass-counter);
	counter-increment: my-badass-counter;
}

根据需要对 :before 元素进行样式设置。 例如

我只想让大家了解这种能力。 一旦您理解了它，就会想到各种需要进行编号的事物。 例如，我最近 发布了我最喜欢的食谱之一的博客文章，并用方块罗马数字对每个步骤/图片进行了编号。

这提醒了我：数字不一定是十进制的。 它们可以是 list-style-type 支持的任何东西。 即

disc (• • •)
circle (○ ○ ○)
square (▪ ▪ ▪)
decimal (1 2 3)
decimal-leading-zero (01, 02, 03)
lower-roman (i ii iii)
upper-roman (I II III)
lower-greek (α β γ)
lower-latin (a b c)
upper-latin (A B C)
armenian (Ա Բ Գ)
georgian (ა ბ გ)
lower-alpha (a b c)
upper-alpha (A B C)

您只需在计数器值本身中指定哪一个

content: counter(my-counter, lower-roman);

未来

上面的内容很酷，属于“今天可以使用”™ 类别。 但是，当您看到 CSS3 列表 的进步时，它几乎感觉像是黑客手段。 一旦浏览器对它的支持到来，我们就可以自由地对列表的标记进行定位

/* 
  Examples from THE FUTURE
  No browser support at the time of this writing 
*/

li::marker { 
  width: 30px;
  text-align: right;
  margin-right: 10px;
  display: inline-block;
}

ol { 
  list-style: symbols("*" "\2020" "\2021" "\A7"); 
}

ul { 
  list-style-type: "★"; 
}