html - 在 CSS 中以 Unicode 数字定义自定义列表类型的更好方法

Question

我想制作一个自定义列表类型的 Khmer Unicode Number ១ ២ ៣.. 有序。我尝试使用 css css pseudo 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 属性可以接受非常广泛的值(参见 docs)。包括 高棉语!所以你很幸运，最简单的方法是简单地定义你的有序列表的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 所述，并非所有浏览器都支持它。另一个选项可能是使用 @counter-style不支持更多......如果应该支持所有浏览器，你必须坚持你的解决方案。