html - 如何使用 CSS 自动添加节号（1.2、3.4.1）？

Question

如何使用 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>

应该显示

1. 标题21

   1.1 标题31

2. 标题22

或类似的规定。

Answer 1

嘿，现在你可以使用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

Answer 2

要回答“如果我只有一个h2，我如何抑制前导1？”的问题：更改h2::before样式选择器，因此h2必须遵循h1：

h1::before ~ h2::before {
  // your h2 attributes go here
}