根据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));