元素仅可见，如果有通过CSS没有兄弟姐妹

Question

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

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

然而，整个“没有项目”逻辑属于视图和应该远离逻辑。理想情况下，我想刚才

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 id="container"> 
    <div class="vis-only-no-siblings">No items</div> 
    <div>Item 1</div> 
    <div>Item 2</div> 
<div> 

只要申报单没有其他的兄弟姐妹，你就可以使用:only-child pseudoselector，像这样：

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

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