CSS计数器输出不匹配

前端之家收集整理的这篇文章主要介绍了CSS计数器输出不匹配前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

有人可以解释一下为什么在所有h2标签中打印部分计数器值为0?

这是源代码

最佳答案
在您的解决方案中,body标签中有两个反重置属性

  1. body {
  2. counter-reset: section;
  3. counter-reset: subsection;
  4. }

顾名思义,CSS是级联的,因此第二次出现的counter-reset属性会覆盖第一个.结果反复位:部分;将被反重置:子部分覆盖;并且根本不会定义部分重置.

解决方

>将子部分计数器移动到h1标记中.然后子部分计数器将为每个h1标签重置:

  1. body {
  2. counter-reset: section;
  3. }
  4. h1 {
  5. counter-reset: section;
  6. }

>使用区域计数器内联定义子部分计数器,如@Temani suggested.然后子部分计数器不会重置:

  1. body {
  2. counter-reset: section subsection;
  3. }

猜你在找的CSS相关文章