代码之家 › 专栏 › 技术社区 › David Thomas

如何给列表样式类型自动生成的数字上色?

xhtml css html

David Thomas · 技术社区 · 17 年前

我正在使用以下列表:

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

#000 #f90 ).

我试过使用 list-style-color

有什么想法吗?

<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> 是啊发生了这种情况,虽然我感谢你的建议和花的时间,但我一直在寻找(li'l standardista,我是…;))一个更…语义的选择。

事实上,我想我可能会采用这种方法。尽管我接受了另一个不同的答案,皮特·米肖的答案,因为它纯粹是信息性的。谢谢

8 回复 | 直到 12 年前

Mårten Björk 15 年前

在CSS3中有一种方法,使用 Generated and Replaced Content Module

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

Can Berk Güder Pugalmuni 17 年前

这应该起作用:

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

Alec Rust 12 年前

好吧,关键是这些数字在技术上是在 <li> <李>

CSS中的大多数块级元素生成一个主块框。内容)和一个单独的标记框(用于装饰,例如

请注意,标记框和主体框都属于相同的元素-在本例中为列表项。因此,我们应该期待所有 <李> 要同时应用于标记和内容的样式。如果你把它看成是一个列表,这也就不足为奇了项本身正在生成编号内容(有效地继续:

更一般的标记是,带有“display:list item”的元素会生成其他列表属性允许作者指定标记类型 (图像、字形或数字)及其相对于主体框(在内容之前在其外部或内部)。他们没有或调整其相对于列表标记的位置

因此,由于标记属于列表,因此它受 <李> 样式和不可直接调整。为标记实现不同样式的唯一方法是插入 <span>

Volker E. Lee 12 年前

此简单的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

Ben 14 年前

我最近遇到了类似的问题,发现了一篇文章, Styling ordered list numbers 不使用其他标记 . 文章基本上说,对于有序列表:

有关更多详细信息,请参阅文章。

retrovertigo 6 年前

现在你可以用 ::marker ;

li::marker {
  color: #f90;
}

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

John Gietzen 17 年前

这个怎么样?

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

Ael 13 年前

用于层次结构中的不同级别,并认为一个li可能不止一行( :之后 放在底线,所以我们使用 :之前

注意侧边字符的自定义: 1. 1) .在铬中测试。

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) "."; }

-1

Denis Andryushchenko 15 年前

See here