前端学习笔记22-关系选择器

元素关系

父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素（父元素也是祖先元素）
后代元素：直接或间接被祖先元素包含的元素（包括子元素）
兄弟元素：拥有相同父元素的元素

<div>
    <p>
        我是div的子元素
        <span>
            我是p的子元素，div的后代元素
        </span>
    </p>
    <span>我是div的子元素，p的兄弟元素</span>
</div>

子元素选择器

作用：选子元素
语法：父元素>子元素

    <style>
        div>span{
            color: red;
        }
    </style>

如果我有两个div，但我只想设置其中一个div的span怎么办？加class。

<div>
    <span>我是另一个div的span</span>
</div>

<div class="d1">
    <p>
        我是div的子元素
        <span>
            我是p的子元素，div的后代元素
        </span>
    </p>
    <span>我是div的子元素，p的兄弟元素</span>
</div>

    <style>
        div.d1>span{
            color: red;
        }
    </style>

后代元素选择器

作用：指定元素内的指定后代元素
语法：祖先 后代{}

    <style>
        div span{
            color: red;
        }
    </style>

<div>
    <p>
        我是div的子元素
        <span>
            我是p的子元素，div的后代元素
        </span>
    </p>
    <span>我是div的子元素，p的兄弟元素</span>
</div>

还有一种写法，找孙子元素
语法：父元素>子元素>孙元素（我自己命名的）

    <style>
        div > p > span{
            color: red;
        }
    </style>

选择下一个兄弟

作用：选择元素的下一个兄弟
语法：元素1+元素2

    <style>
        p+span{
            color: red;
        }
    </style>

选择下边所有兄弟

作用：元素的下面的所有兄弟
语法：元素1~元素2

    <style>
        p~span{
            color: red;
        }
    </style>