html - 选择给定类(class)的第一个 child ，如何？

<分区>

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

最佳答案

虽然这在 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;
}

关于html - 选择给定类(class)的第一个 child ，如何？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22489522/