在学习jQuery到子元素过滤选择器的":nth-child"选择器时,我发现在使用":nth-child"代码时,前面是否加空格对于页面显示的效果会有不同,具体如下:
- 不加空格时:
$('div.one:nth-child(1)').css('background','darkgoldenrod');
显示效果:
- 加空格时:
$('div.one :nth-child(1)').css('background','darkgoldenrod');
显示效果:
区别很明显,所以个人理解:
- :nth-child前方加空格是因为jQuery的层次选择器中的$('ancestor descendant')的逻辑,也就是说加了空格以后,:nth-child所获取的是前面ancestor 元素的后代元素descendant。以上面例子来解释:
- 当:nth-child前面不加空格时,:nth-child是以div.one为索引获取条件的,所以其获取的是div.one元素中索引号为1的元素。
- 当:nth-child前面加上空格时,:nth-child是以div.one的后代元素为索引条件的,也就是说在加了空格的情况下,该选择器所选择的才是class为one的<div>父辈元素下的索引号为1的元素。
PS:在提问区的两位大神也帮忙解答了我的疑问,答案和我个人的理解一样,使得自己的理解得到了确认,再次感谢下面两位老师: