如何在不使用伪元素的情况下将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伪元素和{{1}的解决方案CSS属性，但这些不使用content元素的HTML5 value属性。

无论你给出什么答案，它应该是当前CSS3的语义。这是因为最终实现将使用li来突出显示目标元素，因此无法保证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>

<强>输出：