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

Posted 2023-03-06

【中文标题】选择给定班级的第一个孩子，如何？ [复制]

【英文标题】：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）

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

【问题讨论】：

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

很抱歉，您能否再解释一下。你的例子让我更加困惑。

哦，没关系。 :nth-of-type() 和 :first-of-type() 仅适用于元素标签，不适用于类或 ID。

.. 和 ***.com/questions/3615518/… .. 见 BoltClock 的答案。

【参考方案1】：

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

EXAMPLE HERE

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

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

EXAMPLE HERE

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

您也可以这样做：

EXAMPLE HERE

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 的回答，这让我找到了解决方案。谢谢！