jQuery :first-child 选择器使用上并不是望文生义的。
例如，$("p:first-child")
似乎是选取任何一个<p>标签内第一个子元素。实际上并不是这样。准确的理解是，选择任何一个容器内的第一个p元素，而且要求p元素是该容器内第一个子元素。
例子一：
<body>
<p>第一段</p>
<p>第二段</p>
</body>
$("p:first-child")可以命中第一段（也仅有第一段），因为第一段是body容器中第一个p元素，且是body容器中第一个元素。
例子二：
<body>
<span>别的文字</span>
<p>第一段</p>
<p>第二段</p>
</body>
$("p:first-child")没有任何命中，因为第一段是并非是body容器中第一个元素。
例子三：
<body>
<p>第一段</p>
<div><p>第二段</p></div>
</body>
$("p:first-child")会命中第一段和第二段。记住，它会选择任何一个容器内的第一个p元素，只要p元素是该容器内第一个子元素。
例子四：
<body>
<div id="id1"><p>第一段</p></div>
<div id="id2"><p>第二段</p></div>
</body>
我只想命中第二段怎么办？那就这样：
$("#id2 p:first-child")
网友评论