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

【问题标题】：Pure CSS replacing of periods in OL>LI elements纯 CSS 替换 OL>LI 元素中的句点
【发布时间】：2012-09-09 02:19:09
【问题描述】：

据我所知，无论您设置什么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 有任何关系。我希望它尽可能接近正确的 HTML 5 和 CSS 3。

【问题讨论】：

另见stackoverflow.com/questions/1632005/…

标签： html css styles html-lists

【解决方案1】：

您可以使用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

【讨论】：

这是否适用于其他列表样式，例如罗马数字？
实际上不得不收回这个，因为它不适用于 HTML VALUE 属性
据我所知，counter 只是数字。您所说的“它不适用于 HTML 值属性”是什么意思？请发布您的代码...
代码发布在上面的编辑中。这里也举例说明：jsfiddle.net/EvNSh/3 您的代码不尊重LI 元素的VALUE 属性
@Supuhstar，是的，这可以用罗马人来完成。见coreyjmahler.com/html-pages/zlist-styles.html