根據list-style-type CSS獲取索引號對應的字符

Question

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_ol_type_all_css

我想根據 CSS 中的列表樣式類型和數字索引提取正確的字符

例如，如果我想要list-style-type: lower-greek; : γ

示例 2，我想要list-style-type: cjk-ideographic; : 九

示例 3，我想要list-style-type: lower-roman; : 一、二、三

有沒有辦法用代碼輕松做到這一點？

我相信 3 的字符的索引為 2，而 9 的字符的索引為 8 ......因為索引從 0 開始。

如何根據列表樣式類型為我想要的數字返回正確的字符？

Answer 1

第一個答案（CSS但沒有JS）

我相信您將不得不使用第n 個子選擇器，並結合list-style-type: 'γ. '; list-style-type: 'γ. '; （ Mozilla 文檔）！

結帳@codepen： https://codepen.io/netrules/pen/yLzBMqK

<ul>
  <li>a, b, c, d</li>
  <li>e, f, g, h</li>
  <li>i, j, k, l</li>
  <li>...</li>
  <li>now i know my abc's!</li>
</ul>

ul {
  list-style-type: lower-greek;
}

li:nth-child(3) {
  list-style-type: 'γ. ';
}

我不知道是否有更好的解決方法。 我會再次檢查以獲取未來的評論。

第二個答案

在二讀時，我認為您所指的實際上與此css-tricks 帖子中顯示的內容相似。 您可以在本網站查找預定義的計數器 styles，然后編寫相應的 javascript 來評估和 map。 也相關：與瀏覽器套件相關的 CSS3 計數器 Styles 的單元測試 [ url ]。

這是一種方法： https://codepen.io/netrules/pen/KKXPWEo

const charmap = "900 ϡ, 800 ω, 700 ψ, 600 χ, 500 φ, 400 υ, 300 τ, 200 σ, 100 ρ, 90 ϟ, 80 π, 70 ο, 60 ξ, 50 ν, 40 μ, 30 λ, 20 κ, 10 ι, 9 θ, 8 η, 7 ζ, 6 στ, 5 ε, 4 δ, 3 γ, 2 β, 1 α";
const processedChars = charmap.split(", ");
const mapArray = processedChars.map(x => {
  let vals = x.split(" ");
  return {rem:vals[0], symbol:vals[1]};
})

function evalNumberToListKey(num) {
  let numCalc = num;
  let out = '';
  for(let element of mapArray) {
    const temp = numCalc%element.rem;
    if(temp !== numCalc) {
      numCalc = temp;
      out += element.symbol;
    }
  }
  return out;
}

document.write(evalNumberToListKey(951));