如何選擇除第一個以外的子父母中的所有子女

這應該是一件簡單的事情，但我似乎無法找到我所追求的。我有一個家長分公司與子父母和孩子在裏面。如何選擇除第一個以外的子父母中的所有子女

<div class="parent"> 
    <div class="subparent1"> 
    <div class="foo">foo1 </div> 
    <div class="bar">bar1 </div> 
    </div> 
    <div class="subparent2"> 
    <div class="foo">foo2 </div> 
    </div> 
    <div class="subparent3"> 
    <div class="bar">bar2 </div> 
    <div class="foo">foo3 </div> 
    <div class="bar">bar3 </div> 
    </div> 
</div>

我想隱藏除第一個之外的所有'.foo'類。我如何使用CSS3選擇除第一個之外的所有'.foo'的其餘部分？

PS - '.foo'的數字是動態的，並且會改變。

來源

2013-02-12 user1775598

'.parent .foo {display：none;}'和'.parent .foo：first {display：block;}'？ – mshsayem 2013-02-12 08:55:43

@mshsayem：在CSS中沒有'：first'。 – BoltClock 2013-02-12 08:56:11

哦，我明白了;在這種情況下：'.parent> .foo {display：none;}'和 '.parent> .foo：first-of-type {display：block;}'？ – mshsayem 2013-02-12 09:03:41

像這樣的情況依賴於HTML結構的先驗知識;如果沒有可預測的HTML，就沒有辦法單獨使用CSS來完成它，因爲CSS無法選擇某種類型的第一個孫，只有第一個子。

例如，如果你知道第一個.foo將總是發生在第一subparent，您可以用選擇的任何.foo顯示爲一個塊，然後選擇所有後續subparents脫身，並使用.foo小號在general sibling combinator ~和隱藏他們：

.parent > .subparent1 > .foo { 
    display: block; 
} 

.parent > .subparent1 > .foo ~ .foo, /* .foo after the first in .subparent1 */ 
.parent > .subparent1 ~ div > .foo { /* .foo in subparents after .subparent1 */ 
    display: none; 
}

如果.subparent1可能不包含任何.foo元素可言的，你要選擇的第一個非常.foo無論其subparent的，我不認爲這是可能單獨CSS選擇器。您可能需要找到不同的方式，例如通過爲第一個.foo分配一個額外的類，因爲它是動態生成的，或者使用JavaScript來應用樣式。

來源

2013-02-12 08:53:18 BoltClock

非常感謝你，這個工作，但現在我有一個不同的問題。如果'.parent'類具有包含'.foo'的子級別，該怎麼辦？ http://jsfiddle.net/kucF5/ – user1775598 2013-02-12 09:08:03

@ user1775598：你想隱藏除foo1之外的所有'.foo'嗎？也許你應該編輯你的問題或發佈一個新的問題。 – BoltClock 2013-02-12 09:12:35

是的，這是正確的 – user1775598 2013-02-12 09:13:40

如何選擇除第一個以外的子父母中的所有子女

回答

相關問題