Question

我真的不明白为什么计数器不会增加h3元素。

<style>
h1
{
    counter-reset: h2counter;
}


h2:before
{
    content: counter(h2counter) ".\0000a0\0000a0";
    counter-increment: h2counter;
    counter-reset: h3counter;
}

h3:before
{
    content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
    counter-increment: h3counter;              
}
</style>

<html>
    <body>
        <h1>XXXX</h1>
        <h2>YYYY</h2>
        <h3>ZZZZ</h3>
        <h3>ZZZZ</h3>
        <h3>ZZZZ</h3>
        <h2>YYYY</h2>
        <h3>ZZZZ</h3>
        <h3>ZZZZ</h3>
        <h3>ZZZZ</h3>
    </body>
</html>

我找到了一个解释相似内容的例子，但问题是关于没有相同直接父级的元素。这些都有。

Multiple CSS counters not working as expected

Answer 1

这是因为您已将getScopesByTenantEndpoint<T>(searchText: string, onlyActive: boolean): Observable<T> { return Observable.create(observer=>{ const scopes = localStorage.getItem('scopeObject'); //If you want to throw an err if(!scopes){ throw 'no scope given' } observer.next(scopes); } }应用于错误的位置，即counter-reset: h3counter。您需要将h2:before应用于counter-reset: h3counter标记，而不是<h2>

＆＃13;

:before

＆＃13;

h1 {
  counter-reset: h2counter;
}

h2 {
  counter-reset: h3counter;
}

h2:before {
  content: counter(h2counter) ".\0000a0\0000a0";
  counter-increment: h2counter;
}

h3:before {
  content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
  counter-increment: h3counter;
}

＆＃13;

Answer 2

在您h2指令之前，您无法在伪元素中重置。

＆＃13;

h1 {
  counter-reset: h2counter;
}

h2 {
  counter-reset: h3counter;
}

h2:before {
  content: counter(h2counter) ".\0000a0\0000a0";
  counter-increment: h2counter;
}

h3:before {
  content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
  counter-increment: h3counter;              
}

＆＃13;

<h1>h1 - 1</h1>
<h2>h2 - 1</h2>
<h3>h3 - 1</h3>
<h3>h3 - 2</h3>
<h3>h3 - 3</h3>
<h2>h2 - 2</h2>
<h3>h3 - 1</h3>
<h3>h3 - 2</h3>
<h3>h3 - 3</h3>

＆＃13;

CSS计数器增量不能按预期工作

2 个答案: