我有一个div,在div里面有多个p标签.我需要使用css对它们进行编号. p标签的数量可能会有所不同.
使用:nth-child()和::之后我可以做这样的事情
div p:first-child::before { content: '1 ' } div p:nth-child(2)::before { content: '2 ' } div p:nth-child(3)::before { content: '3 ' } div p:nth-child(4)::before { content: '4 ' } div p:nth-child(5)::before { content: '5 ' }
<div> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> </div>
如果有大量元素,我该如何实现它.在css里面有没有任何关于子编号的方法:nth-child(),这样的东西.
div p:nth-child(n)::before { content: n }
解决方法
您可以使用:: before(:IE8之前)和counter-reset / increment来使用
CSS counters
div { counter-reset: number; } p { counter-increment: number; } p::before { content: counter(number)" "; }
<div> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。