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属性可以接受非常广泛的值（请参阅docs）。包括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所述。另一个选项可能是使用@counter-style而不支持更多...如果应该支持所有浏览器，则必须坚持使用您的解决方案。

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

1 个答案: