选择具有给定班级的第一个孩子，如何？

Question

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

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

我试过，：第一个孩子，：第一个类型和：nth-​​child（1n）但没有任何效果。 有任何想法吗？ （仅限CSS）

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

Answer 1

尽管使用CSS并不是完全可能的，但这适用于当前的示例：

EXAMPLE HERE

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

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

EXAMPLE HERE

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

另外，您也可以这样做：

EXAMPLE HERE

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

Answer 2

你需要给包装div一个类名，然后你可以使用第一个子伪选择器。

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

CSS

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