css - 在 css 计数器中使用第三章，而不是第三章

Question

如何在 css 有序计数器中使用“三”章而不是“3”章？

规范规定数字可以是 css 的列表样式类型可以是的任何内容。

我是不是运气不好，因为没有 list-style-type = alpha？

Answer 1

如果没有JS，那是完全不可能的。如果您知道自己有多少章，则可以使用 @counter-style 手动定义自己的固定计数器样式。

main {
  counter-reset: count;
}

h1::before {
  counter-increment: count;
  content: "Chapter " counter(count, alpha);
}

@counter-style alpha{
  system: fixed;
  symbols: "One" "Two" "Three" "Four" "Five" "Six" "Seven" "Eight" "Nine" "Ten" "Eleven" "Twelve" "Thirteen" "Fourteen" "Fifteen" "Sixteen" "Eighteen" "Ninteen" "Twenty";
  suffix: " ";
}

<main>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
</main>