Child Selector
Citation Link: http://blog.csdn.net/u012110719/article/details/41171517
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.
[HTML]View PlainCopy
- <style type="Text/css">
- . Food>li{border:1px solid red;} /* Add border Style (1px thickness, solid red color) */
- </style>
[HTML]View PlainCopy
- <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
- <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>
The difference between a child selector of a CSS and a descendant selector