无法用jquery选择第一个孩子

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标签

编辑

我只是错过了一个空间.这个页面不包括节奏.

我不得不改变我的代码

$("#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后代选择器.

有时,作者可能希望选择器匹配作为文档树中另一个元素的后代的元素(例如,"匹配H1元素包含的那些EM元素").后代选择器以一种模式表达这种关系.后代选择器由两个或多个由空格分隔的选择器组成.

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

因为:首先是jQuery扩展而不是CSS规范的一部分,查询使用:首先不能利用本机DOM querySelectorAll()方法提供的性能提升.要在使用时获得最佳性能:首先选择元素,首先使用纯CSS选择器选择元素,然后使用.filter(":first").