1

我已经看过了是否有一种简单的方法可以更改列表中项目符号的颜色？. 这个问题的答案对我没有帮助，因为我无法控制 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 属性的解决方案，但这些不适用于元素的 HTML5value属性。li

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

4

2 回答 2

7

如链接问题的已接受答案中所述：

项目符号从文本中获取颜色。

从技术上讲，这是因为列表标记（CSS2.1给出的术语表示项目符号或数字）生成自己的匿名框，它是主列表项框的子项。如果适用，此标记框将始终从主框继承样式。

没有办法只针对列表标记框，或者阻止它从主框继承样式，使用 CSS2.1。

然而，有趣的是，它在CSS2.0中旨在允许::before和::after伪元素display: marker，本质上允许您独立于包含它们的元素的主框来设置它们的样式（list-style在此过程中覆盖）。不幸的是，这个特性在 CSS2.1 中被删除了，而且我没有任何可用的资源来解释它为什么被删除。

今天，在 CSS2.1 中，虽然您仍然可以将计数器样式应用于::beforeand ::after，但您不能让它们像真正的列表标记一样。在这两个规范中，您也无法从标记内更改标记的值。

也就是说，虽然display: markerCSS2.1 中不再存在，但样式列表标记的概念正在新的Lists and Counters 模块中重新审视，引入了一个::marker专门针对列表标记设计的伪元素，允许您做一些事情像这样：

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

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

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

于 2013-04-16T14:06:59.367 回答
-1

试试下面的方法，它会帮助你

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>

输出：

在此处输入图像描述

于 2013-04-15T16:29:31.073 回答