只有在CSS中没有兄弟姐妹的情况下才能看到元素

Question

我当前的代码看起来像这样：

if list.isEmpty() {
    output("<div>No items</div>")
} else {
    for each item in list
        optput("<div>" + item + "</div>")
}

但是，整个＆＃34; No items＆＃34; 逻辑属于视图，应该与逻辑分开。理想情况下，我想要

for each item in list
    optput("<div>" + item + "</div>")

然后让HTML模板看起来像这样：

<div id="container">
    <div style="visible only if no siblings">No items</div>
    <div>Item 1</div>
    <div>Item 2</div>
<div>

问题在于我无法弄清楚如何执行"visible only if no siblings"部分。有没有办法使用CSS可靠地实现这一目标（适用于所有标准浏览器）？

Answer 1

只有在没有兄弟姐妹的情况下才能显示您想要的div：

<div id="container">
    <div class="vis-only-no-siblings">No items</div>
    <div>Item 1</div>
    <div>Item 2</div>
<div>

只要div没有其他兄弟姐妹，你就可以使用:only-child伪选择器，如下所示：

#container div.vis-only-no-siblings{
    display: none;
}

#container div.vis-only-no-siblings:only-child {
    display: block;
}