html – 使用css计数器编号错误

前端之家收集整理的这篇文章主要介绍了html – 使用css计数器编号错误前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

为什么以下css没有得到正确的部分编号(http://jsfiddle.net/75MHS/)?当我将h3和h4放在div中时,所有章节编号和章节编号总是一个.但是当我删除div容器时,数字都是正确的.

最佳答案
它在第二部分中的预期工作(没有div)但在第一部分中没有的原因是由于反作用范围.根据W3C

The scope of a counter starts at the first element in the document that has a ‘counter-reset’ for that counter and includes the element’s descendants and its following siblings with their descendants.

在html的后半部分,h3s和h4s是兄弟姐妹,因此,h3上定义的反重置适用于以下h4兄弟.在html的第一部分中,h4s不是h3s的后代或兄弟姐妹,反向休息对它们没有影响,因为它们超出了范围.

另一件事是,如果在给定范围内没有定义计数器重置,则每次在内容规则中反计数增加或引用计数器时,它都会假定值为0,这就解释了为什么要获取所有1的计数器. html的第一部分:

If ‘counter-increment’ or ‘content’ on an element or pseudo-element refers to a counter that is not in the scope of any ‘counter-reset’,implementations should behave as though a ‘counter-reset’ had reset the counter to 0 on that element or pseudo-element.

如果你必须在div中包装东西,我会:

>为主体上的章节计数器定义计数器重置,这样每次使用计数器增量时都不会为0.
>将h4s嵌套在其父h3s下(这不是很酷)或者让它们成为兄弟姐妹,以确保它们处于正确的范围内.

新HTML:

除了CSS:

body {
    counter-reset: chapter;
}

http://jsfiddle.net/myajouri/QpG9d/

原文链接:https://www.f2er.com/html/426021.html

猜你在找的HTML相关文章