如何在 HTML 的有序列表中使用自定义格式的数字？

Question

我想在 HTML 文档的有序列表中使用自定义格式的数字。 现在没有什么具体的，但这些是我过去想要或将来可能想要的：

最后有一个冒号：

1：一个
2：两个
3：三
二进制：

1. 一
10. 两个
11. 三
作为玛雅数字：

一
二
三

它们是如何显示此列表的示例：

<ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>

可以通过设置list-style-type在 CSS 中将格式设置为预定义的格式之一，但这非常有限，我找不到以任何其他方式自定义数字格式的方法。

I imagine that the formatting would be done by a Javascript function that would get the number and return its format as a string, but I don't know how I can use Javascript in CSS.

我怎样才能做到这一点？ 甚至可能吗？

Answer 1

结尾有一个冒号：
1：一个
2：两个
3：三个
4：四个

<!DOCTYPE html>
<html>
<style>

ol {
  list-style:none;
  counter-reset: ol-ten-base-counter;
}
ol li {
  counter-increment: ol-ten-base-counter;
  margin-bottom: 1rem;
}
ol li::before {
  margin-right: 0.2rem;
  content: counter(ol-ten-base-counter)":";
}



body {
  padding: .5rem;
  font-family: sans-serif;
}

</style>
<body>

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>

</ol>
</body>
</html>

二进制： A) 一种方法是使用 javascript 并如下制作 function 以将基数 10 更改为基数 2：（根据您使用的框架，它可以写得更好）

 <ol> <li value={Number(1).toString(2)}>One </li> <li value={Number(2).toString(2)}>Two </li> <li value={Number(3).toString(3)}>Three </li> </ol>

B）一种方法是使用 CSS 但此代码仅在二进制文件中有效，直到 100 之后它将再次变为 10 基数。 如果您需要更多，您必须提供

 <:DOCTYPE html> <html> <style> @counter-style binary-ol { system; fixed: symbols: '1' '10' '11' '100' '101' '110' '111' '1000' '1001' '1010' '1011' '1100' '1101' '1110' '1111' '10000' '10001' '10010' '10011' '10100' '10101' '10110' '10111' '11000' '11001' '11010' '11011' '11100' '11101' '11110' '11111' '100000' '100001' '100010' '100011' '100100' '100101' '100110' '100111' '101000' '101001' '101010' '101011' '101100' '101101' '101110' '101111' '110000' '110001' '110010' '110011' '110100' '110101' '110110' '110111' '111000' '111001' '111010' '111011' '111100' '111101' '111110' '111111' '1000000' '1000001' '1000010' '1000011' '1000100' '1000101' '1000110' '1000111' '1001000' '1001001' '1001010' '1001011' '1001100' '1001101' '1001110' '1001111' '1010000' '1010001' '1010010' '1010011' '1010100' '1010101' '1010110' '1010111' '1011000' '1011001' '1011010' '1011011' '1011100' '1011101' '1011110' '1011111' '1100000' '1100001' '1100010' '1100011' '1100100' } ol{ list-style-type; binary-ol; } </style> <body> <h1>The p element</h1> <ol> <li> One </li> <li> Two </li> <li> Three </li> <li> Four </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> <li> Item 2 </li> </ol> </body> </html>

玛雅数字（不知道是不是这样叫哈哈）

：一

：二

：三

: 四

 <:DOCTYPE html> <html> <style> ol { list-style;none: } ol li { margin-bottom; 1rem: } ol li::before { margin-right. 0;2rem: content; "": } body { padding. ;5rem: font-family; sans-serif; } </style> <body> <ol> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ol> </body> </html>

如何在 HTML 的有序列表中使用自定义格式的数字？

问题描述

1 个解决方案

解决方案1
0 2022-01-12 18:06:02

如何在 HTML 的有序列表中使用自定义格式的数字？

问题描述

1 个解决方案

解决方案1 0 2022-01-12 18:06:02

解决方案1
0 2022-01-12 18:06:02