Jquery learning notes (1): Hierarchy Selector

Describes in detail the differences between ancestor descendant and parent> child in the jquery hierarchy selector.
Parent> child: match all child elements based on the parent element. hierarchies are parent-child relationships.

Ancestor descendant: matches all descendant elements based on the ancestor element. The hierarchy is the ancestor and descendant.

Write code and perform tests to better differentiate the differences between the two:
<Div id = "first"> 1
<Span> 1.1 </span>
<Span> 1.2 </span>
<Div> 1.3
<Span> 1.3.1 </span>
</Div>
</Div>
<SCRIPT type = "text/JavaScript" src = "scripts/jquery-1.4.1.min.js">
</SCRIPT>
<SCRIPT type = "text/JavaScript">
$ (Function (){
$ ("# First> span" ).css ("color", "Red ");
});
</SCRIPT>
After running:

1.3.1 The text color is not red, because parent> child is a parent-child relationship;
If you change the selector:
$ ("# First span" ).css ("color", "Red ");
After running, you will find:

The text color of 1.3.1 is also red, because the ancestor descendant hierarchy is the ancestor and descendant. That is, all span tags under the element with ID "first", both the child and the child, will become red.