如何使用css计数器使第一个li值为0，然后递增2？

使用CSS计数器可以实现使第一个li的值为0，然后递增2的效果。具体步骤如下：

首先，在CSS中定义一个计数器，并将初始值设置为0：

ul {
  counter-reset: my-counter 0;
}

接下来，为需要使用计数器的li元素设置样式，并将计数器的值递增2：

li {
  counter-increment: my-counter 2;
}

然后，在li元素中使用::before伪元素来显示计数器的值：

li::before {
  content: counter(my-counter);
}

完整的CSS代码如下：

ul {
  counter-reset: my-counter 0;
}

li {
  counter-increment: my-counter 2;
}

li::before {
  content: counter(my-counter);
}

这样，第一个li的值就为0，然后依次递增2。你可以将这段CSS代码应用到你的网页中相应的元素上。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

让我们学会使用 CSS 计数器

我看来，CSS计数器在web上还没有得到充分利用，尽管它们的支持非常好(IE8+)!。在本文中，我将解释如何在项目中使用CSS计数器，以及一些用例。...计数器的初始值不是计数器显示时的第一个数字/值。这意味着如果希望计数器从1开始显示，则需要将counter-reset中的初始值设置为零。...0是默认的初始值，所以如果省略它，默认情况下它将重置为零；counter-reset允许使用负值。因此，如果希望计数器从零开始显示，可以将其初始值设置为-1。...默认情况下，计数器使用十进制数字格式化。具体关于style参数的设置可以参照counter()函数的style参数。如何添加计数器 1....2.递增计数器这一步对于计数器的工作非常重要。在元素上，我将创建一个before伪元素，它将用于显示计数器的值。

1.3K3 0

你可能不知道的 CSS 计数器

CSS 计数器基本概念如果仅仅增加一个 Title，大家都知道通过伪元素(:before 或者:after)，设置 content 为 Title，但是如何自动根据 h3 出现的顺序来展示自动编号可能很多人就不知道了...该整数给定了每次出现该元素时给计数器设置的值，默认为 0 counter-reset: 计数器名称[, 默认值number]; /* 重置计数器成0 */ 计数器自增有了一个计数器的变量后...[, 可选的显示风格]) 基本使用学完了基本概念，然后就可以解决上面的问题了。...: title; content: "Title " counter(title) ": "; } 自定义每次递增的值每次递增的值为 2 div { counter-reset: title...5; } h3:before { counter-increment: title 2; /* 每次递增的值为 2 */ content: "Title " counter(title

9222 0

【CSS系列】被忽略的content属性

通常你要实现一个动态的递增数，都是通过 JavaScript 实现，你可能都没有想过 CSS 也是可以实现递增数。这个牛逼的东西就是「计数器」。...先来看看什么叫计数器：本质上 CSS 计数器是由 CSS 维护的变量，这些变量可能根据 CSS 规则增加以跟踪使用次数。...计数器的值通过使用 counter-reset和 counter-increment操作，然后通过 counter()或 counters()函数来显示在页面上。光说不练假把式，来看看如何使用它。...首先，使用前必须要通过 counter-reset重置一个初始值。它默认是 0。你也可以指定初始值。...counter-reset: record; /* 重置计数器为 0 */ counter-reset: record 2; /* 重置计数器为 2 */ 除此之外，它的值还可以是多个。

1.2K2 0

「css基础」你想知道的伪元素内容都在这篇文章里（长文值得收藏）

通过指定一开始counter-reset 的起始计数值，还有counter-increment累加的递增数值（步长），还可以指定从某个数值开始计数。...05 ::first-letter ::first-letter顾名思义就是「第一个字」，通过这个伪元素，可以做出许多文章第一个字放大或变色的效果，我们这里就用刚刚上面那段文字为例，把第一个字用下段的CSS...')获取div里头伪元素使用的style，然后显示在span里面。...JavaScript开声明一个变量css，通过id获取style，然后使用在指定一个变量给css.sheet，就可以通过insertRule的方法修改了。...需要注意的是，由于规则加入时会放在整串style的开头(第二个值预设0 )，所以纯粹使用一个#d是无法覆盖原本的属性( CSS权重问题)，所以这边使用#d#d两次，就可以在权重上压过原本的属性。

9763 0

你不知道的CSS

CSS允许开发者定义命名的计数器，可以使用CSS内容属性进行递增、递减和显示。...counter-increment指定一个要递增的计数器（或者如果计数器被定义为反转，或者如果向counter-increment传递一个负值，则递减）。...counters(notes, ".") ": "; font-weight: bold;}使用CSS计数器，可以让我们轻松地添加、删除和重新排列这些元素，而不必担心手动更新计数器值，也不需要使用JavaScript.../* 为所有计数器实例增加以“.”分隔的值 */} item <!...注意在第一个例子中，中间部分的颜色看起来很浑浊和冲淡，因为浏览器默认使用的是RGB颜色插值。我们目前无法改变这一点，但将来可能会使用新的CSS功能。

2.4K6 2

CSS计数器 counter

适用场景：当排序以及序号变动对服务端造成的压力大的情况下，使用css计数。...在早期，只有ol和ul可以对子元素li进行排序，，而CSS2.1规范中加入了counter这一属性，配合伪元素:before、:after中的content使用，便可以对指定的元素进行排序。...利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。如果使用了 “display: none”，则无法增加计数。...利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。可能的值: none 默认。不能对选择器的计数器进行重置。...如果想重复多次计数器可以使用 counters() 第一个参数：counter-increment中定义的计数器标识符；第二个参数：计数器风格，类似于list-style-type。

1.4K9 0

【译】CSS列表，标记，计数器

本文，会首先讲解CSS的列表，然后把目光转移到CSS列表规范中的一些有趣特性——标记和计数器。在CSS中，列表具有特定的属性，为我们提供了标准的列表样式。...接下来，我们先了解清楚在CSS中什么是列表。列表和其它CSS属性一样，也有很多初始值，而这些初始值体现了列表的特征。首先，要定义一个元素为列表项，就需要设置display属性为list-item。...counters()函数的第一个参数是计数器名，这里使用的是内置计数器list-item，第二个参数是个字符串——用于连接输出的计数器（这里使用的是一个.符号）。...例如你有一组计数为2的列表项（嵌套在计数为4的列表项里），则该分支包含： 4 2 可以通过一下代码在标记中输出4.2。...）或者，我们可以将h2元素设置list-item，然后通过使用::marker伪元素来实现上述结果。

1.2K3 0

爬虫课堂（十八）|编写Spider之使用Selector提取数据

可以看出来使用Selector来分析提取网页内容是在编写Spider中必不可少，同时也是最重要的工作之一，这一章节我们就来学习使用Selector如何提取网页数据。...二、XPath选择器介绍及使用关于XPath选择器的介绍和使用详见之前写的文章：爬虫课程（八）｜豆瓣：十分钟学会使用XPath选择器提取需要的元素值三、CSS选择器介绍及使用 3.1、CSS选择器介绍...选择属于其父元素的第二个子元素的每个元素 :nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数 ::text p::text 选择元素的文本节点（Text Node） 3.2、CSS选择器使用 还是以提取豆瓣读书书籍信息为例： ?...使用XPath为： book_list = sel.xpath('//ul[@class="cover-col-4 clearfix"]/li') 使用CSS为： book_list = sel.css

1.2K7 0

如何把csscontent的操作跟价值发挥到最大💢

0; // 声明多个计数器 **** counter-increment使计数器的值递增，可以理解成javascript中的+=： counter-reset: count 0; counter-increment...: count 2; // 使count自增2，当前count的值为2 counter-increment: count -2; // 使count自增-2，当前count的值为-2 注意，这里的计数器...显示为""，不支持css属性值拼接普通字符串拼接： content: "xxx" + "xxx"; 字符串拼接函数： // 不能使用 + 连接符，也可以不需要空格，这里只是为了区分 content...: "我支持" attr(xx); count: "我的掘金头像：" url("xxxxx"); content: "计数器的值为：" counter(xx); 隐性转换： content: 0; //...> 写一段css代码 // 章节 .section {

8991 0

如何把csscontent的操作跟价值发挥到最大💢

count1，并从0开始计算 counter-reset: count2 1; // 声明一个计数器count2，并从1开始计算 counter-reset: count3 0 count4 0 count5...0; // 声明多个计数器 **** counter-increment使计数器的值递增，可以理解成javascript中的+=： counter-reset: count 0; counter-increment...: count 2; // 使count自增2，当前count的值为2 counter-increment: count -2; // 使count自增-2，当前count的值为-2 注意，这里的计数器...60px; // 显示为""，不支持css属性值拼接普通字符串拼接： content: "xxx" + "xxx"; 字符串拼接函数： // 不能使用 + 连接符，也可以不需要空格，这里只是为了区分... 写一段css代码 // 章节

5413 0

css基础选择器

标签选择器（元素选择器）标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。...其基本语法格式如下：标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 标签选择器最大的优点是能快速为页面中同类型的标签统一样式...小技巧： 1.长名称或词组可以使用中横线来为选择器命名。 2.不要纯数字、中文等命名，尽量使用英文字母来表示。案例： ?...其基本语法格式如下： * { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。...n 可以是数字、关键词或公式 li:first-child { /* 选择第一个孩子 */ color: pink; } li:last-child {

6353 0

现代 CSS 指南 -- at-rule 规则扫盲

@counter-style — 一个 @counter-style 规则定义了如何把一个计数器的值转化为字符串表示。...一个 @counter-style 规则定义了如何把一个计数器的值转化为字符串表示。利用 @counter-style，我们可以构建自定义的计数器样式。...，计数器的值就可以使用 counter-increment 来指定其为递增或递减 counter()：计数器的值可以使用 counter() 或 counters() 函数以在 CSS 伪元素的 content...: stepCount 1; content: counter(stepCount); } 简单解释一下：在 ul 的样式中，每次都会初始化一个 CSS 计数器 stepCount，默认值为 0...而后再后面的 CSS 代码中补充了每个级联层的 CSS 代码，但是样式的优先级为： A > C > B 因此，最终的 div 的颜色值为 @layer A 中定义的颜色，为 blue：到这里，CSS

1.2K1 0

CSS魔法堂：一起玩透伪元素和Content属性

::是CSS3的写法，其实除了::selection外，其他伪元素既两种前缀都是可以的，为兼容性可选择使用:，为容易区分伪元素和伪类则使用::，但我还是建议使用::来提高可读性，兼容性就让postcss...+，必选，用于标识自增计数器的作用范围，为自定义名称，为起始编号默认为0。...自定义计数器 HTML为我们提供ul或ol和li来实现列表，但如果我们希望实现更为可性化的列表，那么该如何处理呢？content属性的counter类型值就能帮到我们。 <!...通过counter-reset来定义和重置计数器，通过counter-increment来增加计数器的值，然后通过counter来决定使用哪个计数器，并指定使用哪种样式。 ...2} CSS片段： p[lang=en] > q{ quotes: "<!

7223 1

8个硬核技巧带你迅速提升CSS技术

例如第二个，--line-index的值为2，--time的计算值为200ms，换成第三个后这两个值又会不同了。...内容拼接结合attr()使用结合变量和计数器使用 内容拼接常规操作是content:"CSS"，也可拼接多个字符串，有些同学可能第一时间想起content:"Hello "+"CSS"。...0, 0); } } } } 结合变量和计数器使用 现在来玩高级一点的东西，先不做任何铺垫，接着往下看即可，反正就是content结合变量和计数器的使用场景...在这里有个值得注意的地方，若变量结合calc()使用，其结果必须带上单位，以这两条公式为例，其变量初始值必须为--offset:0px，不能为--offset:0。...而counter()还需使用counter-reset初始默认值，CSS计数器怎样用在这里就不讲解了，感兴趣的同学可自行百度。整体改造工程就这样完成了，完整代码如下。

2.8K3 0

如何提升CSS技术？8个硬核技巧带你迅速提升CSS技术

例如第二个，--line-index的值为2，--time的计算值为200ms，换成第三个后这两个值又会不同了。...内容拼接结合attr()使用结合变量和计数器使用 内容拼接常规操作是content:"CSS"，也可拼接多个字符串，有些同学可能第一时间想起content:"Hello "+"CSS"。...0, 0); } } } } 复制代码结合变量和计数器使用 现在来玩高级一点的东西，先不做任何铺垫，接着往下看即可，反正就是content结合变量和计数器的使用场景...在这里有个值得注意的地方，若变量结合calc()使用，其结果必须带上单位，以这两条公式为例，其变量初始值必须为--offset:0px，不能为--offset:0。...而counter()还需使用counter-reset初始默认值，CSS计数器怎样用在这里就不讲解了，感兴趣的同学可自行百度。整体改造工程就这样完成了，完整代码如下。

2.2K4 0

CSS 伪元素技巧

clear 属性可以对应的属性值有： left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。...inherit 规定应该从父元素继承 clear 属性的值。...10px; } .divide:before { left: 0; } .divide:after { right: 0; } 调用元素属性通过在 content 中使用 attr 函数可以调用元素的属性...counter counter-reset：创建或者重置一个计数器 counter-increment：计数器递增 content：配合伪元素插入内容 html: ...="checked">Apple Google Amazon Facebook css

8661 0

1.4K1 0

彻底了解CSS3帧动画

还是上面的代码，只是多加了一个代码： animation-delay: 0s, 1s; 三个动画，但只分配了两个值，这时候，a3 动画会使用第一个值，即这个动画不会有延时，它会与 a1 动画同时开始。...计数取决于开始时是奇数迭代还是偶数迭代； reverse 反向运行动画，每周期结束动画由尾到头运行； alternate-reverse 动画第一次运行时是反向的，然后下一次是正向，后面依次循环。...若 from/0% 或 to/100% 未指定，则浏览器使用计算值开始或结束动画。例如如果要给颜色添加动画，初始值可以在元素样式中定义，也可以在 from 中定义。...> 3 4 然后是 CSS 样式： *{ margin: 0; padding.../* 这里让其与 第一个 li 元素重合，因为 li 元素设置了 margin-left 为 10px，所以 left 要偏移 */ left: 10px; border-radius

9762 0

CSS counter-increment计数器自动递增

另外，counter-reset还可以设置为none和inherit. 干掉重置以及继承重置。你懂的，就不展开了。 2. counter-increment 顾名思意，就是“计数器-递增”的意思。...值为counter-reset的1个或多个关键字。后面可以跟随数字，表示每次计数的变化值。如果缺省，则使用默认变化值1（方便起见，下面的都使用默认值做说明）。...于是，我们可以解释上面提到的“默认值是0”的问题。通常CSS计数器应用的时候，我们都会使用counter-increment, 肯定要用这个，否则怎么递增呢！...而且一般都是1次普照，正好+1，第一个计数的值就是1啦(0+1=1)！下面，通过几个例子，给大家形象地展示下普照规则。 ?...④ 理解了“普照规则”，则以我们通常的计数器递增效果也可以理解了。考虑下面这两个问题：爸爸受到普照，且重置默认值0，爸爸有2个孩子。孩子自身都没有普照。两个孩子的计数值是？

1.8K2 0

一个有意思的方案：不借助后台和 JS ，只用 CSS 让一个列表编号倒序，你会怎么做？

C B A reversed 属性是一个布尔属性，reversed 属性规定列表顺序为降序 (...HTML中的value属性另一种方法就是使用 value 属性： C B ...> A 最好还是不要这样做，因为跳过数字可能会让用户感到困惑。...CSS 自定义的 counter() 第三种方式就是使用CSS的 counter 计算器，要倒序计数器的顺序，我们有两件事要做：将计数器重置为非0的值，并以负数递增计数器。...-1; } ol li::before { content: counter(my-custom-counter) ". " } 一些文章建议使用Flexbox或类似的技术来反转 CSS 中列表顺序

1.3K1 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何使用css计数器使第一个li值为0，然后递增2？

相关·内容

让我们学会使用 CSS 计数器

你可能不知道的 CSS 计数器

【CSS系列】被忽略的content属性

「css基础」你想知道的伪元素内容都在这篇文章里（长文值得收藏）

你不知道的CSS

CSS计数器 counter

【译】CSS列表，标记，计数器

爬虫课堂（十八）|编写Spider之使用Selector提取数据

如何把csscontent的操作跟价值发挥到最大💢

如何把csscontent的操作跟价值发挥到最大💢

css基础选择器

现代 CSS 指南 -- at-rule 规则扫盲

CSS魔法堂：一起玩透伪元素和Content属性

8个硬核技巧带你迅速提升CSS技术

如何提升CSS技术？8个硬核技巧带你迅速提升CSS技术

CSS 伪元素技巧

我想推荐一本书《CSS 世界》

彻底了解CSS3帧动画

CSS counter-increment计数器自动递增

一个有意思的方案：不借助后台和 JS ，只用 CSS 让一个列表编号倒序，你会怎么做？

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐