Bert
Bos,style activity leadCopyright ©1994–2022 W3C®Privacy policy
创建于 17 January 2001;
最后更新2022年02月10日 星期四 05时40分52秒
这是一份翻译。与英文版本相比，它可能包含错误或者过时。翻译员:Samuel Chong of Chinese Translation Services through its pro bono translation services
有想过像以下例子一样，在你做一个列表的时候把符号改成与文字不同的颜色吗？
总有一天 '::marker' 选择器可以从提案到标准，你可以简单地说":: marker {color：red}"。但目前您 可以通过组合几个属性来模拟效果。
您可以制作图像然后用'list-style: url(mybullet.png)'. 这样您可以完全控制项目符号的颜色和形状。 当如果您想要更大或更小的字体大小，您将需要制作一张新的图像。,同上，如果您想要别的颜色。
所以我们宁愿使用能够在项目符号改变特定风格，例如:: 或 ◦ 或 ▪.的文本。 我们需要替换列表项的标记，因为我们不能通过我们生成和调整的标记去选择。为此，我们禁止列表样式并使用':: before' 来添加我们自己的项目符号。首先压制列表样式：
ul {list-style: none}
然后生成我们自己的项目符号:
li::before {content: "::"; color: red}
这样插入了一个红色项目符号，但它的位置与原先的项目符号不同。我们需要把它移到左边而不会移动其后的列表项的文本。 其中一种方法是把我们的项目符号给制成一个既定大小的'inline-block', 说1em，然后将其向左移动自己的大小：
li::before {content: "::"; color: red;
display: inline-block; width: 1em;
margin-left: -1em}
就是这样
顺便一提,如果您无法在样式表输入项目符号，您可以使用这些Unicode号码: :: ="\2022", ◦ = \25E6" and ▪ ="\25AA"
编号列表怎么办？ 它的概念是一样的：因为我们不能用我们自己生成的自动计数器，我们必须更换自动计数器。 除了上面的属性，我们还需要创建一个计数器。 假设我们使用一个叫做"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)
Bert
Bos,style activity lead创建于 17 January 2001;
最后更新2022年02月10日 星期四 05时40分52秒