如何用css实现如下效果

div如下：

<div id="page">
    <h1>Heading Title</h1>
    <h2>Subheading Title</h2>
    <h2>Subheading Title</h2>
    <h1>Heading Title</h1>
    <h2>Subheading</h2>
    <h1>Heading Title</h1>
</div>

要实现的效果如下：

1) Heading Title
1.1) Subheading Title
1.2) Subheading Title

2) Heading Title
2.1) Subheading Title

3) Heading Title

---

#page {
    counter-reset: section;
}

h1 {
    counter-reset: subsection;
}

h1:before {
    counter-increment: section;
    content: counter(section) ") ";
}

h2:before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) ") ";
}

参考：
CSS counter-increment