关于子代元素和后代元素的区别

最近在看jQurey 的时候，被以下两种选择器困惑住了， 所以自己动手尝试了一下。

$("#header div") 查找id为"header"元素的所有后代

元素

$("header > div") 查找id为"header"元素的所有子

元素

这两者的区别就是后代元素与子代元素的区别。 我们知道jQuery选择器的语法书派生于CSS 3.0选择器的语法， 并在其基础上做了一些补充， 下面我们用CSS 选择器来显示两者的区别，方便调试。

1. 后代元素

.info p {
background-color: aquamarine;
}

    
this is my name
    

        
I have a cat
    
    

        
I have a dog
    

这样的结果就是所有后代，包括子代p元素及以后的p元素， 都被选择了

yuans

2. 子代元素
   把选择器改为

.info p {
background-color: aquamarine;
}

则选择结果为

2.PNG

我们可以看到只有子代p元素被选择了。