Question

我已经看到您可以使用各种类型的计数器，如此问题的接受答案中所述：CSS Pseudo Element Counters: can you increment an alphabet letter "a", "b", "c", etc instead of a number?

然而，是否可以通过浮点数递增，例如0.5？这将给出一个列表，比如3.0,3.5,4.0,4.5等。

以下是我试图做的事，无济于事：

.values li:before {
  content: counter(step);
  counter-increment: step 0.5;
}

如果step为浮点数（仅当为整数），则无法识别<li>之后的值。

如果无法做到这一点，我可以使用另一种方法按编程方式设置t_OrderPayment元素吗？

谢谢。

Answer 1

您可以使用多个规则伪造它nth-child等

ul {
  counter-reset: numbers;
  list-style-type: none;
}

li:before {
  padding-right: 1em;
}

li:nth-of-type(2n+1)::before {
  counter-increment: numbers;
}

li:nth-child(odd)::before {
  content: counters(numbers, "") ".0";
}

li:nth-child(even)::before {
  content: counters(numbers, "") ".5";
}

<ul>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
</ul>

Answer 2

CSS可能不是你能用到的最好的东西。尝试使用JavaScript：

＆＃13;

var children = document.getElementById("values").children;
var value = 1;
for(var i = 0; i < children.length; i++) {
  var child = children[i];
  child.innerHTML = value + " " + child.innerHTML;
  value += 0.5;
}

＆＃13;

<ul id="values">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

＆＃13;

Answer 3

你可以毫不费力地做到这一点，CSS支持这个功能。您需要为内容值添加少量counters。

＆＃13;

ol {
    counter-reset: section;
    list-style-type: none;
    counter-reset: subsection;
    counter-increment: section;
}

li::before {
    counter-increment: subsection 5;
    content: counter(section) "." counter(subsection) " ";
}

＆＃13;

<ol>
  <li>item</li>
  <li>item     
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

＆＃13;

CSS计数器：你能用非整数（即浮点数）递增吗？

3 个答案: