元素僅可見，如果有通過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; 
}