如何在我的 CSS 代码中增加计数器？ [复制]答案

【问题标题】：How can I increment the counter in my css code? [duplicate]如何在我的 CSS 代码中增加计数器？ [复制]
【发布时间】：2017-01-09 12:39:02
【问题描述】：

在我的html 代码中，我定义了以下列表：

<p class="list">first.</p>
<p class="list">second.</p>

现在，css 我有：

.list {
  display: table;
}
.list:before {
  display: table-cell;
  counter-increment: counter;
  content: counter(counter) '.';
  padding-right: 5px;
}

页面上的结果是：

1. first
1. second

如何将第二个数字增加到 2？

【问题讨论】：

我不明白你为什么只使用有序列表<ol></ol>。这正是它的用途。
您正在增加一个未声明的计数器。但是 CSS 比 JS 更理智，这个计数器变成了本地的，而不是全局的。

标签： html css list css-tables css-counter

【解决方案1】：

您应该在 lists 的 包装器 上使用 counter-reset 属性 - 请参阅下面的演示：

body {
 counter-reset:counter;
}
.list {
  display: table;
}
.list:before {
  display: table-cell;
  counter-increment: counter;
  content: counter(counter) '.';
  padding-right: 5px;
}

<p class="list">first.</p>
<p class="list">second.</p>

【讨论】：

这个答案最好地解释了你的问题，虽然我肯定会考虑使用有序列表，如果这是你的用法@user3766930
只有在没有子列表的情况下才有效。
OP 不是在谈论子列表@ssc-hrep3？
@kukkuz:: 这个css属性（反增量）是否具有浏览器兼容性？这是使用订单列表项的正确选择
。
伙计们，OP 是关于为什么 counter 不起作用而不是哪个更好或兼容：D

【解决方案2】：

您可以使用：

<ol>
  <li>first</li>
  <li>second</li>
</ol>

这将为您提供所需的输出。

这是一个有效的fiddle.

这样你就不需要在 CSS 中做任何计算，更简单、更简单的解决方案和兼容的跨浏览器。

【讨论】：

我的猜测，因为它没有回答问题how to increase the counter using css 不错的选择，但如果 OP 想要使用不同的标记。
我只是提供了一个替代解决方案@NickSalloum 并没有在任何地方说你不能这样做。我认为你自己不需要这样的 cmets。如果我的解决方案不起作用，那么 OP 可以使用其他答案。不如你提供一个答案而不是批评别人。
我更同意这个答案。 OP 正在使用奇怪的 CSS 来获得列表的样式/效果......所以使用列表。有时，一个好的答案并不是 OP 所要求的。

【解决方案3】：

您需要重置计数器：

body {
    counter-reset: section;
}
.list {
  display: table;
}
.list:before {
  display: table-cell;
  counter-increment: section;
  content:counter(section) ". ";
  padding-right: 5px;
}

<p class="list">first.</p>
<p class="list">second.</p>

【讨论】：

那些// 应该代表评论吗？或者在css中有什么我不知道的？哈哈
是的，它们应该是 cmets，我现在删除了它们，对此感到抱歉
啊，好的。是的，那些// 在 C 和 PHP 中是有效的。 /* ... */ 是 css 中的 cmets ;-) 但很确定你知道 ;-)
是的，我意识到了这一点，并在您指出后立即将其删除。当您同时用一种以上的语言回答问题时会发生这种情况。谢谢你
呵呵，我明白你的意思了。好东西你修好了，有人可能会来对你投反对票（没有评论）。干杯

【解决方案4】：

body {
    counter-reset: section;
}

h1 {
    counter-reset: subsection;
}

h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}

<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>

来源：http://www.w3schools.com/css/css_counters.asp

【讨论】：

【解决方案5】：

你应该这样使用：

<ol>
    <li class="list">first.</li>
    <li class="list">second.</li>
</ol>

【讨论】：

为什么是should？ - 我们不知道为什么 OP 有这样的标记，并且想要使用 <p> 标记并对它们进行编号既不是无效的 HTML，也不是不正确的。
原始发帖人专门询问使用计数器，而不是有序列表。虽然您的推理可能会得到验证，但您的回答根本没有帮助。