根据list-style-type获取索引号对应的字符CSS

Question

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

我想根据 CSS

中的 list-style-type 和数字索引提取正确的字符

例如，如果我想要 list-style-type: lower-greek; 中 3 的字符：γ

例子2，我想要list-style-type: cjk-ideographic;中9的字符：九

例3，我想要list-style-type: lower-roman;中的字符1,2,3：i,ii,iii

有没有办法用代码轻松做到这一点？

我认为 3 的字符索引为 2，9 的字符索引为 8...因为索引从 0 开始。

我如何根据列表样式类型 return 我想要的数字的正确字符？

Answer 1

第一个答案（CSS 但没有 JS）

相信你一定会用到n-th child selector, combined with list-style-type: 'γ. '; (mozilla docs)!

结帐@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 post. You can look up the pre-defined counter styles in this website and then write the corresponding javascript to evaluate and map them. Also relevant: unit tests for CSS3 Counter Styles in relation to browser kits [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;
    }
    if(numCalc === 0) {
      break;
    }
  }
  return out;
}

document.write(evalNumberToListKey(951));

根据list-style-type获取索引号对应的字符CSS

Get character corresponding to index number based on list-style-type CSS

javascript

css

html-lists

第一个答案（CSS 但没有 JS）

结帐@codepen：https://codepen.io/netrules/pen/yLzBMqK

第二个答案