Skip to content

关于counter-reset无法多次重置的问题 #480

@531014023

Description

@531014023

我在使用时发现虽然可以实现计数器的自动增长,counter-reset仅仅能在根元素生效一次,如果我想实现遇到h1reset``h2的计数器,多次reset就无法正常工作了

正常在浏览器显示是这样的

Snipaste_2024-07-10_17-26-46

使用juice之后变成这样了

11111

这还是我将代码中增加的判断给去掉了的情况下,否则将无法识别h2的计数器
Snipaste_2024-07-10_17-29-45

以下是相关的css,我的代码h1可以正常增长,但h2不行,即使修改代码了也只能实现自动增长,无法和h1进行联动。

#nice p {
    text-indent: 2em;
  }
  
  /* 一级标题 */
  #nice h1 {
    line-height: 28px;
    border-bottom: 1px solid rgb(37,132,181);
    counter-reset: counterh2;
  }
  
  #nice h1:before {
    background: rgb(37,132,181);
    color: white;
    counter-increment: counterh1;
    content: 'Part'counter(counterh1); 
    padding: 2px 8px;
  }

 #nice h2:before {
    counter-increment: counterh2;
    content: counter(counterh1)"."counter(counterh2); 
    color:rgb(37,132,181);
    border-bottom: 4px solid rgb(37,132,181);
    font-size: 18px;
    padding: 2px 4px;
  }

html代码如下:

<section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com">
<h1><span class="prefix"></span><span class="content">测试h1</span><span class="suffix"></span></h1>
<h2><span class="prefix"></span><span class="content">测试h2</span><span class="suffix"></span></h2>
<h2><span class="prefix"></span><span class="content">测试h2</span><span class="suffix"></span></h2>
<h1><span class="prefix"></span><span class="content">测试测试h1</span><span class="suffix"></span></h1>
<h2><span class="prefix"></span><span class="content">测试h2h2</span><span class="suffix"></span></h2>
<h2><span class="prefix"></span><span class="content">测试h2h2</span><span class="suffix"></span></h2>
</section>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions