html - 如何在不使用伪元素的情况下将 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 属性，但它们不能与 li 元素的 HTML5 value 属性一起使用。

无论您给出什么答案，它都应该符合当前 CSS3 的语义。这是因为最终实现会使用:target来高亮目标元素，因此HTML结构无法保证。

Answer 1

如 accepted answer to the linked question 中所述:

The bullet gets its color from the text.

从技术上讲，这是因为列表标记(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;
}

当然，这在任何地方都行不通，因为它只是一个提议。希望有一天这会改变，但知道它正在被考虑总是好的。