Open 531014023 opened 4 months ago
我在使用时发现虽然可以实现计数器的自动增长,counter-reset仅仅能在根元素生效一次,如果我想实现遇到h1就reset``h2的计数器,多次reset就无法正常工作了
counter-reset
h1
reset``h2
正常在浏览器显示是这样的
使用juice之后变成这样了
juice
这还是我将代码中增加的判断给去掉了的情况下,否则将无法识别h2的计数器
以下是相关的css,我的代码h1可以正常增长,但h2不行,即使修改代码了也只能实现自动增长,无法和h1进行联动。
css
h2
#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代码如下:
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>
我在使用时发现虽然可以实现计数器的自动增长,
counter-reset
仅仅能在根元素生效一次,如果我想实现遇到h1
就reset``h2
的计数器,多次reset就无法正常工作了正常在浏览器显示是这样的
使用
juice
之后变成这样了这还是我将代码中增加的判断给去掉了的情况下,否则将无法识别h2的计数器
以下是相关的
css
,我的代码h1
可以正常增长,但h2
不行,即使修改代码了也只能实现自动增长,无法和h1进行联动。html
代码如下: