jQuery :first-child选择器

:first-child选择器语法

$('selector:first-child')

语法解析

如上语法，jQuery的:first-child选择器一般与基本选择器selector搭配使用，如果selector类型的元素的父元素下的第一个子元素与selector元素的类型相同（或class属性相同），那么该元素就会被匹配选择，如果该元素出现在第二个子元素（第一个子元素为其它类型），那么该元素也不会被匹配选择，具体可参考下方的实例代码。

jQuery :first-child选择器实例代码

如下实例，两个div元素中包含了多个不同类型的元素，其中第一个div中的第一个子元素的class属性为abc，第二个子元素的第一个子元素的class为xyz，第二个子元素才为abc，如此，使用:first-child选择器匹配选择的时候，将只选择第一个div中的第一个该类型的子元素：

<div>
  <p class="abc">段落1</p>
</div>
<div>
  <p class="xyz">段落2</p>
  <p class="abc">段落3</p>
</div>
<button id="example" class="btn">jQuery</button>

<script>
  $('#example').click(function(){
    $('.abc:first-child').css("font-size","3.5em");
  })
</script>

免责声明：内容仅供参考，不保证正确性！

hot：热门