Automattic / Automattic/juice

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

Open
#480 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
3.3k
Forks
233
Avg merge
1d 10h
Merged PRs (30d)
8

Description

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

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

![Snipaste_2024-07-10_17-26-46](https://github.com/Automattic/juice/assets/22349094/a8a04d4b-19a8-4b9a-a527-ae65c134df11)

使用`juice`之后变成这样了

![11111](https://github.com/Automattic/juice/assets/22349094/060504a0-d5e2-49a3-b746-f545e3463fe5)

这还是我将代码中增加的判断给去掉了的情况下,否则将无法识别h2的计数器
![Snipaste_2024-07-10_17-29-45](https://github.com/Automattic/juice/assets/22349094/ba7315b7-0da4-4e6d-9c78-93d4e600c8da)

以下是相关的`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`代码如下:

```

测试h1


测试h2


测试h2


测试测试h1


测试h2h2


测试h2h2

```

Contributor guide

Open the contributing guide

Research direction

No source file or test is named. Start by reproducing the supplied CSS and HTML in Juice, then compare the browser result with the inlined output. Done means repeated counter-reset behavior is preserved so h1 and h2 numbering remains linked across multiple headings.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.