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