如何选择具有特定类名的第一个子元素？

Question

我有以下的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）

测试案例：http://jsfiddle.net/7YRAF/

- BMCouto

---

难道没有 :nth-of-type() 伪选择器吗？ - Chad

抱歉，能否再解释一下？你的例子让我更加困惑了。 - ntgCleaner

哦，没事了。:nth-of-type()和:first-of-type()只适用于元素标签，而不是类或ID。 - Chad

请参考 https://dev59.com/7nA65IYBdhLWcg3wzyL8 中的BoltClock的回答。 - Josh Crozier

Answer 1

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

在此处放置示例

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

如果前一个元素没有类名.xpto，它基本上只选择后继的.xpto元素。由于你删除了这个类，所以选择‘第一个’元素。不过，这显然并不适用于所有情况，因此最好使用jQuery，因为你已经在使用它。

这里有一个示例

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

作为一种替代方案，您也可以这样做：

这里放示例

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

- Josh Crozier

---

非常棒且简洁的解决方案！谢谢 :) - BMCouto

Answer 2

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

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

CSS

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

- Matt Lambert

---

不行，Matt。一旦你从第一个div中删除了.xpto类，它就不再是:first-child了。请尝试一下。 - BMCouto

嗨，.xpto类与使用:first-child无关。您正在定位.wrapper父级中的第一个div。内部div上的类可以是任何内容，它不起作用。我更新了代码以显示此内容。请记住，您需要将一些内容插入div中，否则当您翻转为display:block;时，将不会显示任何内容。我创建了一个演示，网址为：http://jsfiddle.net/9KbB5/ - Matt Lambert

Matt，你的小提琴不能反映我的情况。如果你尝试使用我的小提琴来尝试那种方法，你就会明白为什么:first-child行不通。 另外，请检查Josh的答案，它引导我找到了解决方案。谢谢！ - BMCouto