【2000米】请教 CSS counter 计数器问题

WOWWOW · 发表于 2021-5-19 00:38:58

本帖最后由 WOWWOW 于 2021-5-20 21:39 编辑

我在修改词典的CSS，遇到这么一个问题.

之前问题表达的不够详细哈,重新整理下问题.

在父元素pad 只有一个类名叫.phone的子元素时候，不计数。但此时其pad父元素下可以有很多其他类名的子元素的比如.pod,.pid,.ped.

当父元素pad有两个以上叫.iphone的子元素,则计数.

注意：只计类名为.phone子元素的数. 父元素pad的其他类名的子元素如：pod,ped不计数的。看我的下方的CSS描述

<div class=“pad”>
<div class="phone"></div>
<div class="pod"></div>
<div class="ped"></div>
</div>

复制代码

.

pad{counter-reset:section;}
.iphone::before{counter-increment:section;
content:counter(setion)"."}

复制代码

诶.我自己学的CSS不够完整. 我是在B站上学的，学了一整套CSS视频了. 但一整套视频里没有only-child, only-of-type .以及counter的知识.
哪里才有完整的CSS知识学啊。

n0thing · 发表于 2021-5-19 20:37:28

本帖最后由 n0thing 于 2021-5-19 20:41 编辑

https://jsfiddle.net/43eLq1j6/

n0thing · 发表于 2021-5-19 02:56:01

https://jsfiddle.net/enw3ap0m/

kyletruman · 发表于 2021-5-19 15:45:27

本帖最后由 kyletruman 于 2021-5-19 16:03 编辑

2楼n0thing已经解决了问题，https://www.picb.cc/image/w2kuFi(不会翻墙的看这里，我上传的在线图床，https://www.picb.cc/为永久免费图床，单次最大上传图片10MB)，

.pad {
counter-reset: section;
}
.pad > .phone::before {
counter-increment: section;
content: counter(section) ". ";
}
.pad > .phone:only-child::before {
display: none;
}

复制代码

，https://jsfiddle.net/这个网站可以在线显示css和js文件的修改效果，可惜没有这样的软件，原网站需要翻墙访问，很不方便

WOWWOW · 发表于 2021-5-19 19:12:57

n0thing 发表于 2021-5-19 02:56
https://jsfiddle.net/enw3ap0m/

感谢大神，我之前问的问题不够详细。还恳请麻烦再看下。

WOWWOW · 发表于 2021-5-19 19:13:08

kyletruman 发表于 2021-5-19 15:45
2楼n0thing已经解决了问题，https://www.picb.cc/image/w2kuFi(不会翻墙的看这里，我上传的在线图床，https ...

感谢大神，我之前问的问题不够详细。还恳请麻烦再看下。

[求助] 【2000米】请教 CSS counter 计数器问题

评分

点评

评分

点评