gpt4 book ai didi

html - 如何在不使用伪元素的情况下将 OL 的编号与其内容分开着色?

转载 作者:行者123 更新时间:2023-11-28 05:00:33 24 4
gpt4 key购买 nike

我已经看过 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结构无法保证。

最佳答案

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;
}

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

关于html - 如何在不使用伪元素的情况下将 OL 的编号与其内容分开着色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16019989/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com