为何jQuery的:first-child选择器未生效？类被添加到父元素而非子元素

你写的$('#foo:first-child')逻辑是选中id为foo，且本身是其父元素第一个子元素的元素——这和你想选#foo的子元素完全是两回事，所以类才会被加到#foo本身上。

要选中#foo的子元素，需要调整选择器的写法，分两种场景：

• 若要选中#foo的所有后代里的第一个子元素（包括深层嵌套的元素），给选择器加空格（代表后代选择器）：

  $('#foo :first-child').addClass('foobar');
  

  这段代码会同时选中#bar（它是#foo的第一个子元素）和<p>（它是#bar的第一个子元素），两者都会变成粉色。

• 若只想选中#foo的直接子元素里的第一个，用子元素选择器>：

  $('#foo > :first-child').addClass('foobar');
  

  这段代码只会选中#bar，只有它会变成粉色。

• 也可以用jQuery的方法链实现，逻辑更直观：

  $('#foo').children().first().addClass('foobar');
  

  效果和子元素选择器的写法一致，只选中#foo的直接第一个子元素。

内容的提问来源于stack exchange，提问作者Alan A