您可以幫我用自動編號使用css來表示我的'標題標題'和'子標題'。因爲我需要有標題只有H1，H2，不與醇，UL，李...如何使用css實現標題的自動編號
這裏是我的代碼：
<style>
h1,h2 { display: list-item; list-style-position: inside; }
</style>
<div id="page">
<h1>Heading Title</h1>
<h2>Subheading Title</h2>
<h2>Subheading Title</h2>
<h1>Heading Title</h1>
<h2>Subheading Title</h2>
<h1>Heading Title</h1>
</div>
在此先感謝
能否請您試試這個它會幫助你。
#page {
\t counter-reset: heading;
}
h1:before {
\t content: counter(heading)") ";
\t counter-increment: heading;
}
h1 {
\t counter-reset: subheading;
}
h2:before {
\t content: counter(heading)"." counter(subheading)") ";
\t counter-increment: subheading;
}<div id="page">
<h1>Heading Title</h1>
<h2>Subheading Title</h2>
<h2>Subheading Title</h2>
<h1>Heading Title</h1>
<h2>Subheading Title</h2>
<h1>Heading Title</h1>
</div>感謝這個我期望的... – vignesh
嘗試。你需要定義你的父母DIV作爲<ol>和它的孩子爲<li>
#page {
list-style: none;
counter-reset: newCounter;
padding: 0 0 0 20px;
overflow: visible;
}
#page > .top-list h1 {
display: list-item;
}
#page > .top-list h1:before {
counter-increment: newCounter;
content: counters(newCounter, ".")" ";
}
.inner {
list-style: none;
counter-reset: newCounter;
padding: 0 0 0 20px;
overflow: visible;
}
.inner > h2 {
display: list-item;
}
.inner > h2:before {
counter-increment: newCounter;
content: counters(newCounter, ".")" ";
}<div id="page">
<div class="top-list">
<h1>Heading Title</h1>
<div class="inner">
<h2>Subheading Title</h2>
<h2>Subheading Title</h2>
</div>
</div>
<div class="top-list">
<h1>Heading Title</h1>
<div class="inner">
<h2>Subheading Title</h2>
</div>
</div>
<div class="top-list">
<h1>Heading Title</h1>
</div>
</div>
請出示你嘗試過這麼遠嗎？你做了多少研究。請添加你的CSS以及 – Lucian
@Lucian我已經添加了我的CSS，我已經嘗試過了。 – vignesh