Question

我有一个XML文档，我正在尝试通过CSS设置样式。此XML的相关片段如下所示：

<senseBlock>
    <prelim>Not numbered</prelim>
    <sense>first item</sense>
    <sense>second item</sense>
    <sense>third item</sense>
</senseBlock>

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

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

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中使用。

Answer 1

啊哈！我使用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;
}

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

1 个答案: