CSS计数器和自定义组件怎么处理?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (58)

我使用CSS中的自定义计数器输出。然而,当H1标记在自定义组件中时,计数器似乎会重置.这是错误吗?

示例:CSS:

h1 {
counter-increment: countH1;
}

HTML:

<h1>hello</h1>     -> counter is 1
<h1>hello</h1>     -> counter is 2
<my-component>
  <h1>hello again</h1> -> counter is 1 again :-(
</my-component>

My-Component是一个自定义元素.这是一个定制元素,用来定义‘My-Component’,myComponent在JS中实现。

CSS计数器与自定义组件不兼容吗?

提问于
用户回答回答于

你可以保留HTML的原样,但请尝试使用之前或之后使你的CSS看起来像这样:

body {
  counter-reset: countH1;
}

h1 {
counter-increment: countMe;
}

h1:before {
  content: counter(countMe, upper-roman);
  padding-right: 20px;
}

扫码关注云+社区

领取腾讯云代金券