Question

这应该是一件简单的事情，但我似乎无法找到我追求的东西。我有一个父母div与子父母和孩子在里面。

<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'的数量是动态的并且会改变。

Answer 1

这种情况取决于HTML结构的先验知识;如果没有可预测的HTML，就没有办法单独使用CSS，因为CSS无法选择某种类型的第一个孙子，只能选择第一个孩子。

例如，如果您知道第一个子显示中的第一个.foo将总是，那么您可以选择任何.foo来显示为一个块，然后使用general sibling combinator ~选择所有后续的子父母和.foo并隐藏它们：

.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，而不管其子属性如何，我认为CSS选择器不可能单独。您可能必须找到不同的方式，例如通过为第一个.foo分配一个额外的类，因为它是动态生成的，或者使用JavaScript代替应用样式。

如何选择除了第一个以外的所有子女

1 个答案: