如何在 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