html - 如何使用 css 计数器增量

Question

如何仅在特定段落上使用 css 计数器增量，因为它已应用于我文档中的所有其他段落。

这是我当前的代码：

    div.Counter{

counter-reset: my-counter ; 
}
h2::before {
    content: "Chapter" counter(my-counter) " : ";
    counter-increment: my-counter 1;
    color: blue;
}  
h2{counter-reset: subsection;
}
p::before{
      content: counter(my-counter) "." counter(subsection) "." ;
      counter-increment: subsection;
      color: red;
      margin-right: 5px;

}

}

标签： htmlcss

Answer 1

尝试为特定段落指定一个类或 id，如下所示：

<p class="counterParagraph">This is a paragraph</p>

并编辑你的 CSS

p.counterParagraph::before{
    content: counter(my-counter) "." counter(subsection) "." ;
    counter-increment: subsection;
    color: red;
    margin-right: 5px;
}