项目符号css样式,CSS: 项目符号及列表编号颜色

彩色列表编号

编号列表怎么办？ 它的概念是一样的：因为我们不能用我们

自己生成的自动计数器，我们必须更换自动计数器。

除了上面的属性，我们还需要创建一个计数器。

假设我们使用一个叫做"li"的计数器。我们先把它在

OL元素设置为0：ol {list-style: none; counter-reset: li}

然后把它当成上面的项目符号一样使用li::before {content: counter(li); color: red;

display: inline-block; width: 1em;

margin-left: -1em}

还有一件事是缺少: 由于它是我们自己的

计数器，我们也负责增加它：li {counter-increment: li}

效果如下所示:

第一项

第二项

这样可能足够，但如果您有多于九个项目,

它看起来会这样：

第一项

第二项

第三项

第四项

第五项

第六项

第七项

第八项

第九项

第十项

而您可能更喜欢这个:

第一项

第二项

第三项

第四项

第五项

第六项

第七项

第八项

第九项

第十项

这样需要四个变化: 将数字进一步向左移动，并将该额外

数量作为边距添加到右边，向右对齐列表编号，和设置文本的

方向到'rtl'。为什么是'rtl'？我将在下面解释.example ol li::before {content: counter(li); color: red;

display: inline-block; width: 1em; margin-left: -1.5em;

margin-right: 0.5em; text-align: right; direction: rtl}

我们把数字放进一个1em宽的框然后把它们向右边对齐。

但如果数字比框宽的话，它们就不会向右对齐而是向左对齐。

文本在CSS是不允许溢出左侧的框；除非文本是一种由右向

左的语言，比如说希伯来语或阿拉伯语。由于数字不是希伯来语

或阿拉伯语的文字，所以它们实际上不是从右到左。

但通过说我们的框遵循从右到左文本的规则，我们允许数字在

左边溢出，因此在右边能够保持正确对齐。

(假如您不想加 `direction: rtl', 你可以省略它，并使用

更大的宽度和左边距，比如说，`width: 2em;

margin-left: -2.5em'。 这应该提供足够的空间让正确对齐数字达999)