当前位置:  开发笔记 > 前端 > 正文

CSS计数器如何工作?

如何解决《CSS计数器如何工作?》经验,为你挑选了1个好方法。





  




  

h1

h2

h2

h2

b p







在上面的片段中:

看起来所有的
标签都被CSS计数器忽略了.原因是?

在上面的代码片段中,元素78代表什么?

GolezTrol.. 6

问题解释

看起来所有的
标签都被CSS计数器忽略了.原因是?


标签和其他"空"元素一样,支持计数器,但不幸的是,它们没有::after伪元素.就像实例元素一样,你不能通过CSS来制作内容.由于递增计数器发生在::after您的片段中的此伪元素中,因此计数器不会因
元素增加而递增br::after.

在上面的片段中,元素7和8代表什么?"

BODY和HTML标签.自您使用以来::after,计数器会递增,并且在其他页面内容之后将内容插入这些元素的末尾.

半修复:计算元素而不是伪元素

您可以稍微更改CSS以增加元素本身的计数器,并仅显示伪元素中的值.





  




  

h1

h2

h2

h2

b p







上面的例子还没有完全奏效,因为它在上升一个级别时不会增加计数器.这是因为在打开元素时计数器已经递增,并且关闭HTML并且BODY不再增加计数器.

解决方法:计算伪元素和空元素

更好地修复它的方法:在最后增加计数器::after,但添加一个额外的CSS,为没有::after伪元素的元素递增计数器:





  




  

h1

h2

h2

h2

b p







也许它对于每种情况都不是完美的,但无论如何你的问题似乎更具学术性.无论如何,我希望这个解释至少可以帮助你理解为什么在你的片段中这些
元素似乎根本没有反制.



1> GolezTrol..:

问题解释

看起来所有的
标签都被CSS计数器忽略了.原因是?


标签和其他"空"元素一样,支持计数器,但不幸的是,它们没有::after伪元素.就像实例元素一样,你不能通过CSS来制作内容.由于递增计数器发生在::after您的片段中的此伪元素中,因此计数器不会因
元素增加而递增br::after.

在上面的片段中,元素7和8代表什么?"

BODY和HTML标签.自您使用以来::after,计数器会递增,并且在其他页面内容之后将内容插入这些元素的末尾.

半修复:计算元素而不是伪元素

您可以稍微更改CSS以增加元素本身的计数器,并仅显示伪元素中的值.





  




  

h1

h2

h2

h2

b p







推荐阅读
雯颜哥_135
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有