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")