The difference between a child selector of a CSS and a descendant selector

Child Selector

There is also a more useful selector sub-selector , the greater than symbol (>), for selecting the first generation of child elements of the specified label element. code in the right-hand code Editor:

. food>li{border:1px solid Red;}

This line of code causes the child element Li (fruit, vegetable) under the class name to add a red solid line border.

<style type="Text/css">

. Food>li{border:1px solid red;} /* Add border Style (1px thickness, solid red color) */

</style>

<H1> food </H1> 　　<ul class="food">

<li> Fruit

　　　　　　<ul>

　　　　　　　　<li> Banana </li>

　　　　　　　　<li> Apple </li>

　　　　　　　　<li> Pear </li>

　　　　　　</ul>

　　</li>

　　<li> vegetables

　　　　<ul>

　　　　　　<li> Cabbage </li>

　　　　　　<li> rape </li>

　　　　　　<li> Cabbage </li>

　　　　</ul>

　　</li>

</ul>

Include (descendant) selectors

contains a selector , which is a space to select the Descendants element under the specified LABEL element . code in the right-hand code Editor:

. First  span{color:red;}

This line of code makes the "timid" font color red in the first paragraph of text content.

Notice the difference between this selector and the sub-selector, where the child selector (children selector) refers only to its immediate descendants, or you can understand the first generation of descendants acting on child elements. The descendant selector is an element that acts on all child descendants. The descendant selector is selected by a space, and the child selector is selected by >.

Summary:> acts on the first generation of descendants of the element, and the space acts on all descendants of the element.

Example:

. Food li{
border:1px solid red;/* Add border style (thickness 1px, solid red color) */

}

[HTML]View PlainCopy

2. <ul class="food">
4. <li> Fruit
6. <ul>
8. <li> Banana </li>
10. <li> Apple </li>
12. <li> Pear </li>
14. </ul>
16. </li>
18. <li> vegetables
20. <ul>
22. <li> Cabbage </li>
24. <li> rape </li>
26. <li> Cabbage </li>
28. </ul>
30. </li>
32. </ul>

The difference between a child selector of a CSS and a descendant selector