7

在我的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 的值?

4

5 回答 5

13

您应该在s 的包装器counter-reset上使用属性- 请参见下面的演示:list

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>

于 2017-01-09T12:42:15.157 回答
3

<p>您可以使用以下命令,而不是将 HTML 包装在标签中:

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

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

这是一个工作小提琴。

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

于 2017-01-09T12:43:31.780 回答
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>

于 2017-01-09T12:43:52.107 回答
1

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

于 2017-01-09T12:43:40.440 回答
-2

你应该这样使用:

<ol>
    <li class="list">first.</li>
    <li class="list">second.</li>
</ol>
于 2017-01-09T12:43:15.413 回答