代码之家 › 专栏 › 技术社区 › shennan

使用css计数器生成序数值?

css-counter css

1

shennan · 技术社区 · 5 年前

我猜这是不可能的,但想知道是否有人试图用 CSS Counters 成功了吗?

显然,这在JavaScript中是微不足道的,但希望找到一个只支持样式的解决方案。

0 回复 | 直到 5 年前

1

3

Bhuwan 5 年前

如果你必须加上 th 每一个数字。但在这种情况下,您需要更改1号、2号、3号、21号、22号、23号、31号、32号等等。。。

所以你需要在这里使用n个孩子的概念。使用 :nth-child 以元素为目标。

您还需要使用 :not

body {
  margin: 0;
  font: 13px Verdana;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: item;
}

ul li {
  margin-bottom: 5px;
  position: relative;
}

ul li:before {
  counter-increment: item;
  content: counter(item)"th. ";
  color: red;
  font-weight: bold;
}

ul li:nth-child(10n+1):not(:nth-child(11)):before {
  content: counter(item)"st. ";
}

ul li:nth-child(10n+2):not(:nth-child(12)):before {
  content: counter(item)"nd. ";
}

ul li:nth-child(10n+3):not(:nth-child(13)):before {
  content: counter(item)"rd. ";
}

<ul>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
</ul>

2

doğukan 5 年前

这样地?

body {
  counter-reset: section;
}

h3::before {
  counter-increment: section;
  content: counter(section);
}

h3:nth-child(1)::before {
  content: counters(section, "") "st ";
}

h3:nth-child(2)::before {
  content: counters(section, "") "nd ";
}

h3:nth-child(3)::before {
  content: counters(section, "") "rd ";
}

h3:nth-child(n+4)::before {
  content: counters(section, "") "th ";
}
h3:nth-child(10n+1)::before {
  content: counters(section, "") "st "
}
h3:nth-child(10n+2)::before {
  content: counters(section, "") "nd "
}
h3:nth-child(10n+3)::before {
  content: counters(section, "") "rd "
}
h3:nth-child(11)::before {
  content: counters(section, "") "th "
}
h3:nth-child(12)::before {
  content: counters(section, "") "th "
}
h3:nth-child(13)::before {
  content: counters(section, "") "th "
}

<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>