1

这应该是一件简单的事情，但我似乎无法找到我所追求的。我有一个父 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' 的数量是动态的并且会改变。

4

1 回答 1

3

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

例如，如果您知道第一个.foo总是出现在第一个子父项中，您可以选择 any显示为一个块，然后使用通用兄弟组合.foo器选择所有后续子父项和.foos并隐藏它们：~

.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 来应用样式。

于 2013-02-12T08:53:18.213 回答