使用CSS对h1、h2、h3进行编号，并带有物品标签_Css_Css Counter

使用CSS对h1、h2、h3进行编号，并带有物品标签

css

使用CSS对h1、h2、h3进行编号，并带有物品标签,css,css-counter,Css,Css Counter,我有一段代码，其中HTML是由，而CSS由我：而不是（h3编号错误）：这个怎么样。没有JavaScript；HTML标记与最初的相同正文{ 计数器复位：第3章第0节幻灯片2； } 氢{ 计数器增量：幻灯片-2部分； } h3{ 反增量：滑动； } h1：之前{ 内容：柜台（章）”； } h2：之前{ 内容：柜（章）“‘柜（节）’”； } h3：之前{ 内容：计数器（章节）““计数器（部分）”“计数器（幻灯片）”； } 章节 A节幻灯片a 幻灯片b B节幻灯片a 幻灯片b原因：正

我有一段代码，其中HTML是由，而CSS由我：

而不是（

h3

编号错误）：

这个怎么样。没有JavaScript；HTML标记与最初的相同

正文{
计数器复位：第3章第0节幻灯片2；
}
氢{
计数器增量：幻灯片-2部分；
}
h3{
反增量：滑动；
}
h1：之前{
内容：柜台（章）”；
}
h2：之前{
内容：柜（章）“‘柜（节）’”；
}
h3：之前{
内容：计数器（章节）““计数器（部分）”“计数器（幻灯片）”；
}

章节
A节
幻灯片a
幻灯片b
B节
幻灯片a
幻灯片b原因：
正如我在对问题的评论中所描述的，CSS计数器对级别和文档结构非常敏感。如果结构与特定模式不匹配，则会影响计数器的整个工作。这是因为元素如何继承计数器和计数器的值。关于计数器如何工作、如何继承的详细信息在我的回答中进行了描述
为了更清楚，我在下面的代码片段中添加了内联注释来解释工作原理：

正文{
计数器复位：第3章第0节；
}
氢{
计数器复位：滑动0；
反增量：节；
}
h3{
反增量：滑动；
}
h1：之前{
内容：柜台（章）”；
}
h2：之前{
内容：柜（章）“‘柜（节）’”；
}
h3：之前{
内容：计数器（章节）““计数器（部分）”“计数器（幻灯片）”；
}

章
A节
幻灯片a
幻灯片b
B节
幻灯片a
幻灯片b
我一直需要这个问题来验证pdf中的列表，但是我很难按照这里提供的方式使用它，因为h1没有在css中实现，所以它不算数。
无论如何，有一个解决方案是我自己适应的
<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: chapter 0 section 0;
}
h1{
    counter-increment: chapter;
}
h2 {
  counter-reset: slide 0;
  counter-increment: section;
}
h3 {
  counter-increment: slide;
}
h1:before {
  content: counter(chapter)". ";
}
h2:before {
  content: counter(chapter)"." counter(section)" ";
}
h3:before {
  content: counter(chapter)"." counter(section)"." counter(slide)" ";
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>This paragraph is styled with CSS.</p>
<h2>Test</h2>
<p>CSS comments are not shown in the output.</p>
<h1>Hello World!</h1>
<p>This paragraph is styled with CSS.</p>

</body>
</html>


身体{
计数器复位：第0章第0节；
}
h1{
反增量：第章；
}
氢{
计数器复位：滑动0；
反增量：节；
}
h3{
反增量：滑动；
}
h1：之前{
内容：柜台（章）”；
}
h2：之前{
内容：柜（章）“‘柜（节）’”；
}
h3：之前{
内容：计数器（章节）““计数器（部分）”“计数器（幻灯片）”；
}
你好，世界！
这段文字采用CSS样式
试验
CSS注释不会显示在输出中
你好，世界！
这段文字采用CSS样式
可能重复的（或与之相关的）。编号的原因是因为h3
不在同一父级中。您需要重新查看文档结构，因为按照当前的方式，即使您在正文
处重置所有计数器，它也无法工作，就像在该答案中提到的那样（待续…）即使你做了计数器重置：幻灯片0
在body
会发生的是所有h3
都会得到连续的编号，因为将其重置回0的h2
位于不同的父项下。谢谢你的评论，我将尝试用JavaScript而不是CSS实现它。不，mate。看起来你要么改变结构（或者）在文章中添加类标签，就像（或者）使用脚本一样。谢谢Harry！我想我可以将你的解决方案用于类。这是我的
3. chapter
3.1 section A
3.1.1 side a
3.1.2 side b
3.2 section B
3.2.1 side a
3.2.2 side b

3. chapter
3.1 section A
3.1.1 side a
3.1.1 side b
3.2 section B
3.2.1 side a
3.2.1 side b

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: chapter 0 section 0;
}
h1{
    counter-increment: chapter;
}
h2 {
  counter-reset: slide 0;
  counter-increment: section;
}
h3 {
  counter-increment: slide;
}
h1:before {
  content: counter(chapter)". ";
}
h2:before {
  content: counter(chapter)"." counter(section)" ";
}
h3:before {
  content: counter(chapter)"." counter(section)"." counter(slide)" ";
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>This paragraph is styled with CSS.</p>
<h2>Test</h2>
<p>CSS comments are not shown in the output.</p>
<h1>Hello World!</h1>
<p>This paragraph is styled with CSS.</p>

</body>
</html>