如何在我的 css 代码中增加计数器?
How can I increment the counter in my css code?
在我的 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?
您应该在 list
的 包装器 上使用 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>
你应该这样使用:
<ol>
<li class="list">first.</li>
<li class="list">second.</li>
</ol>
不用将 HTML 包装在 <p>
标签中,您可以使用:
<ol>
<li>first</li>
<li>second</li>
</ol>
这将为您提供所需的输出。
这是一个有效的 fiddle.
这样你就不需要在 CSS 中做任何计数,更容易、更简单的解决方案和兼容的跨浏览器。
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>
您需要重置计数器:
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>
在我的 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?
您应该在 list
的 包装器 上使用 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>
你应该这样使用:
<ol>
<li class="list">first.</li>
<li class="list">second.</li>
</ol>
不用将 HTML 包装在 <p>
标签中,您可以使用:
<ol>
<li>first</li>
<li>second</li>
</ol>
这将为您提供所需的输出。
这是一个有效的 fiddle.
这样你就不需要在 CSS 中做任何计数,更容易、更简单的解决方案和兼容的跨浏览器。
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>
您需要重置计数器:
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>