在CSS中用Unicode号定义自定义列表类型的更好方法

Question

我想要使一个自定义列表类型的高棉Unicode号码១ ២ ៣..有序。我试图使用css、css伪li:nth-child(1) li:nth-child(2) li:nth-child(3)..作为样式表中的定义来存档，如下所示：

ul.mainList {
  list-style-type: none;
}
ul.mainList > li {
  text-indent: -5px;
}
ul.mainList > li:nth-child(1):before {
  content: "១. ";
  text-indent: -5px;
}
ul.mainList > li:nth-child(2):before {
  content: "២. ";
  text-indent: -5px;
}
ul.mainList > li:nth-child(3):before {
  content: "៣. ";
  text-indent: -5px;
}
ul.mainList > li:nth-child(4):before {
  content: "៤. ";
  text-indent: -5px;
}
ul.mainList > li:nth-child(5):before {
  content: "៥. ";
  text-indent: -5px;
}
ul.mainList > li:nth-child(6):before {
  content: "៦. ";
  text-indent: -5px;
}
ul.mainList > li:nth-child(7):before {
  content: "៧. ";
  text-indent: -5px;
}
ul.mainList > li:nth-child(8):before {
  content: "៨. ";
  text-indent: -5px;
}

我的HTML标记是这样的：

<p>List of items</p>
<ul class="mainList">
    <li>Item ១</li>
    <li>Item ២</li>
    <li>Item ៣</li>
    <li>Item ៤</li>
    <li>Item ៥</li>
    <li>Item ៦</li>
    <li>Item ៧</li>
    <li>Item ៨</li>
</ul>

它工作得很好，但是如果我有十到二十个列表项，我也必须定义十到二十次li:nth-child(n)。

有没有更好的办法？谢谢

Answer 1

这是一个不太为人所知的特性，但是list-style CSS属性可以接受非常广泛的值(参见文档)。包括khmer！所以你很幸运，最简单的方法就是简单地定义你的list-style的顺序列表.

​

ol.khmer {
  list-style: khmer;
}

<p>List of items</p>
<ol class="khmer">
  <li>Item ១</li>
  <li>Item ២</li>
  <li>Item ៣</li>
  <li>Item ៤</li>
  <li>Item ៥</li>
  <li>Item ៦</li>
  <li>Item ៧</li>
  <li>Item ៨</li>
</ol>

​

我发现重要的是，并不是所有的浏览器都支持它，正如@Mr_Lister所说的那样。另一种选择可能是使用@计数器式，它不支持更多的.如果应该支持所有浏览器，那么您必须坚持您的解决方案。