Automattic / juice

Juice inlines CSS stylesheets into your HTML source.
MIT License
3.12k stars 221 forks source link

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

Open 531014023 opened 4 months ago

531014023 commented 4 months ago

我在使用时发现虽然可以实现计数器的自动增长,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>