Question

我不明白我做错了什么。我有以下html元素：

<div id="accordion">
    <h3>
        <a href="#">Section 1</a></h3>
    <div>
        <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque.
            Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a
            nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada.
            Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h3>
        <a href="#">Section 2</a></h3>
    <div>
        <p>
            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus
            hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum
            tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
        </p>
    </div>                                    
</div>

这个元素（<div id='accordion'>）清楚地表明它的第一个孩子是h3标签，下一个孩子是div标签然后是h3等

我想选择这个div的第一个孩子。换句话说，我想选择第一个h3标签

因此我尝试过：

    $("#accordion:first-child").css("font-size","30px");

也

     $("#accordion:first").css("font-size","30px");

两种方式都将30px的字体应用于主div元素（<div id='accordion'>）

我做错了什么我想只选择手风琴的第一个孩子它显然是h3标签

修改

我只是错过了一个空间。 this page不包括节奏。

我必须从

更改我的代码

$("#accordion:first").css("font-size","30px");

要

$("#accordion :first").css("font-size","30px");

Answer 1

您必须将父级的ID与:first-child选择器分开。此外，第一个子选择器将选择所有第一个子元素，而不仅仅是一个。要只选择一个，您必须使用:first选择器。

$("#accordion h3:first").css("font-size","30px");

这是css选择器（jQuery大量使用）的工作方式。

请在css descendant selector阅读。

有时，作者可能希望选择器匹配作为文档树中另一个元素的后代的元素（例如，“匹配” H1元素包含的那些EM元素“）。后代选择者以模式表达这种关系。 后代选择器由两个或多个由白色分隔的选择器组成空间

此外，根据jQuery文档，有更好的方法来检索元素的第一个子元素，以实现更好的性能。

因为：首先是jQuery扩展而不是CSS的一部分规范，查询使用：首先不能利用本机DOM querySelectorAll（）提供的性能提升方法。使用时达到最佳性能：首先选择元素，首先使用纯CSS选择器选择元素使用.filter（“：first”）。

Answer 2

阅读:first-child选择器，您正在寻找的是：

$('#accordion h3:first-child').css('font-size', '30px');

来自jQuery API文档：

说明：选择作为其第一个子元素的所有元素父节点。

因此，选择器#accordion:first-child是#accordion元素，它是其父元素的第一个子元素;虽然#accordion h3:first-child是h3中包含的#accordion，但它是它的父级的第一个孩子。

Answer 3

此

$( '#accordion' ).children( ':first' ).css( ...

Answer 4

试试这个：

$('#accordion').children().first().css(...

Answer 5

$(":first", "#accordion").css("font-size", "30px")

Answer 6

使用jquery first-selector和first-child选择器之间存在差异。

由于你有多个第一子元素，你应该只使用第一个选择器，否则它可以像@Jose一样提到所有的第一子元素。

$("#accordion h3:first").css("font-size","30px");

 OR


 $("#accordion h3:first").css("font-size","30px");

无论哪种方式都应该有效！

无法用jquery选择第一个孩子

修改

6 个答案: