如何使用CSS自动添加节号（1.2、3.4.1）？ [英] How to add section numbers (1.2, 3.4.1) automatically using CSS?

问题描述

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

How to add section numbers (1.2, 3.4.1) automatically using CSS?

我目前有

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）是

How to modify them so section numbers such as 1.3, 2.4.5 are automatically constructed depending on the nesting level and order of appearance of the section headers?

...

<h2>heading21</h2>
...

<h3>heading31</h3>
...

<h2>heading22</h2>

应显示

1. heading21

1. heading21

1.1 heading31

1.1 heading31

heading22

heading22

或类似的内容。

推荐答案

现在您可以使用 CSS反增量属性

像这样
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
**

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

More info click here https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment

这篇关于如何使用CSS自动添加节号（1.2、3.4.1）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！