CSS计数器输出不匹配

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

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

这是源代码

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

body {
    counter-reset: section;     
    counter-reset: subsection;
}

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

解决方

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

body {
    counter-reset: section; 
}

h1 {
    counter-reset: section; 
}

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

body {
    counter-reset: section subsection; 
}

猜你在找的CSS相关文章