jQuery :first-child 选择器的理解

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 5,825评论 0 5
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,486评论 19 139
  • 刚开始学习选择器,一开始对伪类选择器确实有点懵。昨天晚上自己动手写了写,终于是慢慢搞懂了。下面对一些容易误解的一些...
    婷楼沐熙阅读 7,206评论 4 7
  • 1.CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 H...
    饥人谷_小侯阅读 4,342评论 0 1
  • 简介浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工 作原理,我们将看到,从你在地址栏输入google.c...
    听风阁阅读 8,522评论 0 7