代码之家 › 专栏 › 技术社区 › Ky -

纯CSS替换OL>LI元素中的句点

html-lists styles css html

Ky - · 技术社区 · 13 年前

据我所知,不管怎样 list-style-type 属性,则分隔列表的数字或字母后面将跟一个句点( . )。 有没有办法把这个改成,比如说,右括号( ) ),甚至将其完全移除?

概念

以下是不正确的CSS,显示了我想要做的事情:

<HTML>
<HEAD>
<STYLE>
OL{
  list-style-type:decimal;
  list-style-punctuation: ')';
}
OL.onlyNumbers{
  list-style-punctuation: none;
}
</STYLE>
</HEAD>
<BODY>
<OL>
  <LI>Won</LI>
  <LI>Too</LI>
  <LI>Tree</LI>
  <LI>Fore</LI>
  <LI VALUE=100>Won Hun Dread</LI>
</OL>
<OL CLASS=onlyNumbers>
  <LI>Won</LI>
  <LI>Too</LI>
  <LI>Tree</LI>
  <LI>Fore</LI>
  <LI VALUE=100>Won Hun Dread</LI>
</OL>
</BODY>
</HTML>

以下是我想在浏览器中看到的内容:

  1) Won
  2) Too
  3) Tree
  4) Fore
100) Won Hun Dread

  1 Won
  2 Too
  3 Tree
  4 Fore
100 Won Hun Dread

一般来说,我不希望与jQuery或JavaScript有任何关系。我希望它尽可能接近正确的HTML5和CSS3。

1 回复 | 直到 13 年前

Giona 13 年前

您可以使用 before 伪元素和 CSS counter 特色

body {
    counter-reset:withBrackets;
    counter-reset:onlyNumbers;
}    
ol {
    list-style:none;
}
ol:not(.onlyNumbers) li {
    counter-increment:withBrackets;
}
ol:not(.onlyNumbers) li:before {
    content:counter(withBrackets) ") ";
}
ol.onlyNumbers li {
    counter-increment:onlyNumbers;
}
ol.onlyNumbers li:before {
    content:counter(onlyNumbers) " ";
}

查看 working demo