Question

我正在使用以下列表：

<ol id="footnotes">
    <a name="footnote1"><li></a>This is the first footnote...</li>
    <a name="footnote2"><li></a>This is the second footnote...</li>
</ol>

使用以下.css：

#footnotes {list-style-type: decimal;
            list-style-color: #f90;
            }

#footnotes li
           {color: #000;
            }

#footnotes a li,
#footnotes li a
           {color: #f90;
            }

目的是让li / footer文本本身为黑色（#000），并将数字设置为橙色（#f90）。

我尝试过使用list-style-color属性但除了扰乱Web开发人员工具栏（在FF3.0.8 / Ubuntu 8.04中）之外什么也没做，Midori同样不会显示橙色的数字（我以为我' d在Webkit引擎中尝试，以防万一......）。

有什么想法吗？

编辑HTML（因为我记得标签不一定需要包含任何东西来充当锚点）：

<ol id="footnotes">
    <li><a name="footnote1"></a>This is the first footnote...</li>
    <li><a name="footnote2"></a>This is the second footnote...</li>
</ol>

回应那些建议在<span>内使用<li>的人...是的。发生了这种情况，虽然我感谢您的建议和所花费的时间，但我正在寻找（我是标准的，我是......;））以获得更多...语义选项。

实际上，我想我可能会使用这种方法。虽然我接受了另一个与Pete Michaud不同的答案，因为它具有纯粹的信息性。谢谢！

Answer 1

CSS3中有一种方法，使用Generated and Replaced Content Module。使用这种技术，您无需为HTML添加任何额外的标记。这样的事情可以解决问题：

ol li {
    list-style-type: none;
    counter-increment: list;
    position: relative;
}

ol li:after {
    content: counter(list) ".";
    position: absolute;
    left: -2.5em;
    width: 2em;
    text-align: right;
    color: red;
}

Answer 2

这应该有效：

<ol id="footnotes">
    <li><span>This is the first footnote...</span></li>
    <li><span>This is the second footnote...</span></li>
</ol>

#footnotes li { color: #f90; }
#footnotes li span { color: #000; }

Answer 3

嗯，踢球者的数字是技术上在<li>内生成的，所以你对<li>做的任何事都会影响数字。来自规范：

“CSS中的大多数块级元素生成一个主要块框。在本节中，我们将讨论导致元素的两种CSS机制生成两个框：一个主要的块框（用于元素的框）内容）和一个单独的标记框（用于装饰，如子弹，图像或数字）。“

请注意，标记框和主框都属于相同的元素 - 在这种情况下，列表项。因此，我们应该期望所有<li>样式都适用于标记和内容。如果您将其视为列表，这也就不足为奇了 item本身正在生成编号内容（实际上是有效的正在用CSS术语）。这在后面的规范确认继续：

“列表属性允许列表的基本视觉格式。与。一样更常见的标记，带有'display：list-item'的元素生成一个元素内容的主框和可选的标记框。其他列表属性允许作者指定标记类型（图像，字形或数字）及其相对于的位置主要框（在内容之前或之内）。他们不允许作者指定不同的样式（颜色，字体，对齐方式，等）用于列表标记或调整其相对于的位置主要方框。“

因为标记属于列表，它受<li>样式的影响，不能直接调整。为标记实现不同样式的唯一方法是在列表项中插入<span>，并使用您希望与标记不同的属性设置范围样式。

Answer 4

这个简单的CSS3解决方案适用于大多数浏览器（IE8及更高版本）：

ul {
    padding-left: 14px;
    list-style: none;
}
ul li:before {
    color: #f90;
    content: "•";
    position: relative; 
    left: -7px;
    font-size: 18px;
    margin-left: -7px;
}

您可能需要根据具体情况调整padding和margin值。

Answer 5

我最近遇到了类似的问题，发现了一篇文章Styling ordered list numbers，该文章描述了一种实现列表标记样式的智能方法，而不使用其他标记。该文章基本上表示对于有序列表：

关键是使用CSS生成的内容来创建和插入从列表中删除默认编号后的计数器编号。

有关详细信息，请参阅文章。

Answer 6

这个怎么样？

<head>
  <style>
    #footnotes li { color: #f90; }
    #footnotes li a { color: #000; }
  </style>
</head>
<body>
  <ol id="footnotes">
    <li><a name="footnote1">This is the first footnote...</a></li>
    <li><a name="footnote2">This is the second footnote...</a></li>
  </ol>
</body>

Answer 7

结合我发现不完整的其他一些答案，我发现这个答案最完整。它考虑了层次结构中不同级别的子样式类型，并认为li可能不止一行（：后面的底线，所以我们使用：前）

注意自定义旁边角色：1. 1)。在Chrome中测试。

ol { counter-reset:li; }
ol li {
    list-style-type:none;
    counter-increment:li;
    position:relative;
}
ol li:before {
    content:counter(li) ")";
    position:absolute;
    left: -2.6em;
    width: 2em;
    text-align: right;
    color: #f00;
}
ol ol li:before { content:counter(li,lower-alpha) ")"; }
ol ol ol li:before { content:counter(li,lower-roman) "."; }

Answer 8

这几天，您只能使用::marker;

示例：

li::marker {
  color: #f90;
}

更多信息，包括浏览器兼容性表：https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#Browser_compatibility

Answer 9

您还可以使用“外部”列表样式属性。 See here

如何为list-style-type自动生成的数字着色？

9 个答案: