选择给定班级的第一个孩子，如何？ [复制]答案

【问题标题】：Selecting the first-child with a given class, how? [duplicate]选择给定班级的第一个孩子，如何？ [复制]
【发布时间】：2014-04-24 17:36:10
【问题描述】：

我有以下 html，我只想显示第一个“.xpto”元素。我的问题是我正在动态删除类 .xpto，所以当我这样做时，第一个 .xpto 元素将是第二个内部 div。我怎样才能做到这一点？

<div>
    <div class="xpto"></div>
    <div class="xpto"></div>
    <div class="xpto"></div>
    <div class="xpto"></div>
</div>

我尝试了 :first-child、:first-of-type 和 :nth-child(1n) 但没有任何效果。有任何想法吗？（仅限 CSS）

【问题讨论】：

【解决方案1】：

虽然这在 CSS 中并不完全可行，但在当前示例中可以使用：

div:not(.xpto) + div.xpto {
    display:block;
}

如果它的前一个元素没有.xpto 类，它基本上只是选择后续的.xpto 元素。由于您要删除该类，因此选择了“第一个”元素。这显然不适用于 all 实例，因此您应该只使用 jQuery，因为您已经在使用它了。

$('div > div.xpto:first').addClass('visible');

您也可以这样做：

div > .xpto {
    display:block;
}
div > .xpto ~ .xpto {
    display:none;
}

【讨论】：

【解决方案2】：

你需要给那个包装的 div 一个类名，然后你可以使用 first-child 伪选择器。

<div class="wrapper">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>

CSS

.wrapper div:first-child {
 display:block;
}

【讨论】：

不，你不能马特，一旦你从第一个 div 中删除 .xpto 类，它就不再是 :first-child 了。请尝试一下。
嗨，.xpto 类与使用 :first-child 无关。您的目标是 .wrapper 父级中的第一个 div。内部 div 上的类可以是任何东西，它不会发挥作用。我更新了代码以显示这一点。记住，你需要在 div 中插入一些内容，否则当你翻转到 display:block;什么都不会显示。我创建了一个小提琴，显示在：jsfiddle.net/9KbB5
马特你的小提琴并不反映我的情况。如果您尝试这种方法，使用我的小提琴您会明白为什么 :first-child 不会这样做。另外，请查看 Josh 的回答，这让我找到了解决方案。谢谢！