CSS selector Summary

 

 

 

CSS descendant Selector

 

The descendant selector is also called the include selector.

 

 

h1 em {color:red;}

There is a negligible aspect about the descendant selector, that is, the hierarchy interval between two elements can be infinite.
For example, if you write ul Em, this syntax Selects all em elements inherited from ul elements, regardless of the depth of the nesting hierarchy of em.
Therefore, UL em Selects all em elements in the following tag:
<ul>  <li>List item 1    <ol>      <li>List item 1-1</li>      <li>List item 1-2</li>      <li>List item 1-3        <ol>          <li>List item 1-3-1</li>          <li>List item <em>1-3-2</em></li>          <li>List item 1-3-3</li>        </ol>      </li>      <li>List item 1-4</li>    </ol>  </li>  <li>List item 2</li>  <li>List item 3</li></ul>

 
 
CSS child element Selector
Child selectors can only be used as a child element of an element.
 
For example, if you want to select only the strong element as the child element of the H1 element, you can write it as follows:
h1 > strong {color:red;}
This rule changes the strong element under the first H1 to red, but the second strong element is not affected:
CSS adjacent sibling Selector
The adjacent sibling selector selects the element next to the other element, and the two have the same parent element.

If you want to add the top margin of a paragraph that appears immediately after the H1 element, you can write it as follows:
h1 + p {margin-top:50px;}