4. Relationship selector (parent-child relationship, ancestor offspring relationship, brother relationship)

1、 Child Selector ：

HTML Code ：

    <div>
        <p>
             I am a p The text in the element 
            <span> This is a p In the element span</span>
        </p>
        <span> This is a div Inside span</span>
    </div>

    <div>
        <span> This is the first 2 individual div Inside span</span>
    </div>

Corresponding CSS Code ：

<style>
        /*
             Parent element ： Elements that directly contain child elements are called parent elements 
             Subelement ： Elements directly contained by the parent element are called child elements 
             Ancestral elements ：
                - Elements that directly or indirectly contain descendant elements are called ancestor elements 
                - The parent element of an element is also the ancestor element of that element （ The parent element is a special ancestor element ）
             Progeny element ：
                - Elements contained directly or indirectly by ancestral elements 

             Child Selector ：
                 effect ： Select the specified child element of the specified parent element 
                 grammar ： Parent element  >  Subelement 
                 give an example ： as follows 
        */
            div>span{
                color:blue;
            }

 </style>

The operation results are as follows ： Only div Subelements span To blue （ all div Directly span The element turns blue , There are several such structures , They all change color ）,p Under the element span Elements do not change color , because p Under the element span The element is div The offspring element of .

---

2、 Descendant element selector

HTML Code ：

    <div>
        <p>
             I am a p The text in the element 
            <span> This is a p In the element span</span>
        </p>
        <span> This is a div Inside span</span>
    </div>

    <div>
        <span> This is the first 2 individual div Inside span</span>
    </div>

Corresponding CSS Code ： 

           /*  Descendant element selector 
                     effect ： Select the specified descendant element of the specified element 
                     grammar ： Ancestral elements   Progeny element 
                     give an example ： as follows 
            */
            div span{
                color:rgb(20, 220, 63);
            }

  Running results ：

---

3.1、 Brother selector 1： Select the element after Next to it first Brother element

HTML Code ：

    <div>
        <p>
             I am a p The text in the element 
            <span> This is a p In the element span</span>
        </p>
        <span> This is a div Inside span</span>
    </div>

    <div>
        <span> This is the first 2 individual div Inside span</span>
    </div>

 CSS Code ：

            /* Brother selector 1： Choose the brother next to you 
                 grammar ： The former element  +  The latter element ( Act on the next element )
            */
            p+span{
                color:chartreuse;
            }

Running effect ： 

3.2、 Brother selector 2： Select the element after All brother elements

HTML Code ：

    <div>
        <p>
             I am a p The text in the element 
            <span> This is a p In the element span</span>
        </p>
        <span> This is a div Inside span1</span>
        <span> This is a div Inside span2</span>
        <span> This is a div Inside span3</span>
    </div>

CSS Code ： 

            /* Brother selector two 
                 Select all the brothers below 
                 grammar ： The former element  ~  The latter element ( Act on the following elements ) （ This is the wave line ）
            */
            p~span{
                color:rgb(0, 139, 7);
            }

Running results ：