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

发布时间：2020-12-14 22:52:52 所属栏目：资源来源：网络整理

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

为什么以下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/

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!