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

仅当有多个项目时,才通过CSS为列表编号

如何解决《仅当有多个项目时,才通过CSS为列表编号》经验,为你挑选了1个好方法。

我有一个XML文档,我试图通过CSS设置样式.此XML的相关片段如下所示:


    Not numbered
    first item
    second item
    third item

我需要将元素作为有序列表呈现,但前提是列表中有多个元素.在只有一个元素的列表中,我需要它显示为没有任何数字的普通段落.

现在我正在为这样的列表设置样式,但是当只有一个项目时我不知道如何隐藏数字:

senseBlock {
    display: block;
    counter-reset: sense;
}

prelim {
    display: block;
}

sense {
    display: list-item;
    list-style: decimal inside;
}

sense:before {
    counter-increment: sense;
}

我想过使用相邻的选择器sense + sense来检测多个项目,但那样就不会设置列表中第一个元素的样式.我已经得出结论,如果不修改XML,这是不可能的,但我想我会在放弃之前将这个挑战扩展到社区.

这只需要在最新版本的Safari for iPhone中使用.



1> cduhn..:

啊哈!我使用CSS3 last-child伪选择器自己解决了这个问题.这个CSS达到了预期的效果:

senseBlock {
    display: block;
    counter-reset: sense;
}

prelim {
    display: block;
}

sense {
    display: list-item;
    list-style: decimal inside;
}

sense:before {
    counter-increment: sense;
}

prelim + sense:last-child {
    display: block;
}

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