如何在不使用僞元素的情況下爲OL的編號與其內容分開着色？

Question

我已經看過Is there an easy way to change the color of a bullet in a list?。這個問題的答案對我沒有幫助，因爲我無法控制HTML結構。這是針對CSS庫的，而不是特定的網頁或網站。

比方說，我有以下代碼：

<style> 
* { 
    background-color: white; 
    color: black; 
} 
#too { 
    background-color: black; 
    color: white; 
} 
</style> 
<ol> 
    <li id="won">Item 1</li> 
    <li id="too">Item 2</li> 
    <li id="tre">Item 3</li> 
</ol> 

第二列表元素應該通過反轉前景色和背景色來突出，但在這樣做，該項目的數量也發生了變化在這種情況下。

有沒有什麼辦法可以做到這一點，同時保持項目2的號碼的初始顏色？我見過::before僞元素和content CSS屬性的解決方案，但這些做而不是與元素的HTML5 value屬性一起使用。

無論你給出什麼答案，它應該與當前的CSS3語義。這是因爲最終實現將使用:target來突出顯示目標元素，因此HTML結構無法保證。

Answer 1

正如accepted answer to the linked question提到：

子彈從文本得到它的顏色。

從技術上講，這是因爲列表標記（由CSS2.1給出的術語來表示項目符號或編號）生成自己的匿名框是主要的列表項框的孩子。此標記框將始終在適用的情況下繼承主體框中的樣式。

無法僅使用CSS2.1來定位列表標記框，或阻止它從主體框中繼承樣式。

---

這很有趣但是需要注意的是，它的目的是在CSS2.0允許::before和::after僞元素display: marker，基本上是讓你獨立樣式它們含有這些元素的主箱（壓倒一切的list-style）。不幸的是，這個特性在CSS2.1中被刪除了，我沒有任何資源可以解釋它爲什麼被刪除。

今天在CSS2中。1，雖然仍然可以將計數器樣式應用於::before和::after，但不能使它們像真正的列表標記一樣行事。在這兩個規範中，您都無法從標記內改變標記的值。

也就是說，雖然display: marker是CSS2.1不再，定型列表標記的概念正在被重新審視在新Lists and Counters module，引進專門設計了一個::marker僞元素的目標列表標記，讓您做這樣的事情：

*, ::marker { 
    background-color: white; 
    color: black; 
} 

#too { 
    background-color: black; 
    color: white; 
} 

當然，這不能在任何地方工作，因爲它只是一個建議。希望有一天會有所改變，但知道它正在考慮之中總是很好的。

Answer 2

嘗試像下面，它會幫助你

CSS：

<style> 
* { 
    background-color: white; 
    color: black; 
} 
#too span{ 
    background-color: black; 
    color: white; 
} 
</style> 

HTML：

<ol> 
    <li id="won"><span>Item 1</span></li> 
    <li id="too"><span>Item 2</span></li> 
    <li id="tre"><span>Item 3</span></li> 
</ol> 

輸出：