如何在不使用伪元素的情况下将OL的数字与其内容分开进行着色？

Question

我已经看过有没有一种简单的方法可以改变列表中子弹的颜色？.这个问题的答案对我没有帮助,因为我无法控制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伪元素和contentCSS属性的解决方案,但这些解决方案不适value用于li元素的HTML5 属性.

无论你给出什么答案,它应该是当前CSS3的语义.这是因为最终实现将用于:target突出显示目标元素,因此无法保证HTML结构.

Answer 1

如联系问题的已接受答案中所述:

子弹从文本中获取颜色.

从技术上讲,这是因为列表标记(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模块中重新设计了样式列表标记的概念,引入了::marker专门用于定位列表标记的伪元素,允许您执行某些操作像这样:

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

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

当然,这不起作用,因为它只是一个提案.希望有一天会改变,但知道它正在被考虑总是好的.