这是一份翻译。与英文版本相比,它可能包含错误或者过时。翻译员: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)
创建于 17 January 2001;
最后更新2022年02月10日 星期四 05时40分52秒