如何使用 CSS 自动添加节号(1.2、3.4.1)?
我现在有
h1, h2, h3, h4 {
font-weight: normal;
}
h1 { font-size: 140%; }
h2 { font-size: 120%; color:#049;}
h3 { font-size: 110%; color:#06C;}
h4 { font-size: 105%; color:#09C;}
如何修改它们,以便根据节标题的嵌套级别和出现顺序自动构造节号(例如 1.3、2.4.5)?
...
<h2>heading21</h2>
...
<h3>heading31</h3>
...
<h2>heading22</h2>
应该显示
标题21
1.1 标题31
标题22
或类似的东西。
最佳答案
嘿,现在你可以使用CSS counter-increment 属性
像这样 CSS
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
font-weight:bold;
}
h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
HTML **
<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>Heading </h1>
<h2>One </h2>
<h2>Two</h2>
**
现场演示http://jsfiddle.net/PfcX2/1/
更多信息点击这里https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment
关于html - 如何使用 CSS 自动添加节号(1.2、3.4.1)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10340276/