有些情况下需要将网页中的最新排行或者是点击排行靠前的几篇文章用项目序号标注出来。比如说，给10篇文章加上1-10的项目序号，并且在前三篇文章前标注红色的颜色，方便用户阅读。可能有很多方法去完成，有的人会使用额外标签添span或者i内添加数字用css样式控制，还有人会用伪元素before与额外标签结合使用等情况。
最近时间，偶然看到css中的counter-increment属性可以简单方面的给标签前面添加项目序号，说实话这个属性我还是第一次见到，它就像一个for循环可以自动给li标签或者其他标签加项目序号。具体介绍可以到w3c教程网去瞧瞧。
在这介绍下我的站是如何给文章li标签前加序号。
首先，给li标签定义一个计数器的名字，比如listxh。
li { counter-increment: listxh;}
然后，给每个li标签前加序号。
li:before {
content: counter(listxh);
}
有些情况下需要将网页中的最新排行或者是点击排行靠前的几篇文章用项目序号标注出来。比如说，给10篇文章加上1-10的...
counter-increment:num css中的自增函数，他会设置的属性值是1开始 依次根据匹配的元素个数数...
一、使用伪类选择器和counter属性 div>div{ counter-increment: count; } ...
一、如何饮用CSS属性到HTML中？ 用 标签 style属性 标签引入到css文件当中 在css文件中引入css...
【css中的背景属性】 简介：css中背景属性用的是background它是一个复合属性和border类似，也就是...
获取元素的属性 获取元素css中的属性 如果元素A的color属性没有在标签中，而是在css样式中，如何获取？ g...
CSS属性选择器 CSS 属性选择器，可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入...
1、css基本语法 css的基本语法格式与python中的dict类型有点类似：{ 属性:值; 属性:值; 属性:...
提到边框，大家首先想到的是CSS的boder属性。不错，border属性是CSS种盒模型基础属性之一。在CSS3中...
calc是CSS3中新增的计算属性。 普通的CSS样式时，计算属性的写法如下： Less中，计算属性的写法如下： ...
本文标题：css中的counter-increment属性
本文链接：https://www.haomeiwen.com/subject/tyjcahtx.html
网友评论