html Css Counter - 标题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Css Counter - 标题相关的知识，希望对你有一定的参考价值。

body {
    counter-reset: section;
}

h1 {
    counter-reset: subsection;
}

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

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


<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

</body>

以上是关于html Css Counter - 标题的主要内容，如果未能解决你的问题，请参考以下文章

当我在属性内容中使用 CSS3 函数 target-counter 时，iText7 不起作用

前端笔记七，级联样式单与CSS选择器

css学习之 counter属性详解

css中的counter计数器

CSS Counter 在 Chrome 中使用 slidetoggle 给出错误的编号

[ css 计数器 counter ] css中counter计数器(序列数字字符自动递增)应用问题讲解及实例演示