如何选择除第一个以外的子父母中的所有子女

这应该是一件简单的事情，但我似乎无法找到我所追求的。我有一个家长分公司与子父母和孩子在里面。如何选择除第一个以外的子父母中的所有子女

<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

如何选择除第一个以外的子父母中的所有子女

回答

相关问题