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

Question

我有以下html,我想只显示第一个".xpto"元素.我的问题是我正在动态删除类.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 来说并不完全可能，但这适用于当前的示例：

示例在这里

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

.xpto如果其前一个元素没有 class ，它基本上只是选择后继元素.xpto。由于您要删除该类，因此会选择“第一个”元素。但这显然不适用于所有情况，因此您应该只使用 jQuery，因为您已经在使用它了。

示例在这里

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

作为替代方案，您也可以执行以下操作：

示例在这里

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