<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       /* 
       为div中的span设置绿色
       后代元素选择器：
       选中指定元素的指定后代元素

       语法：
       祖先元素 后代元素{}
        */
    div span{
        color: green;
    }
    /* 选中div元素中的p元素中的span元素 */
    div p span{
       font-size: 90px;
    }
    /* 子元素选择器 
    选中指定父元素的制定子元素
    语法：
    父元素>子元素
    */
    div>span{
        background-color: lightcoral;
    }
    div>p>span{
        background-color: lightseagreen;
    }
    /* 经常使用的是后代选择器 */
    </style>
</head>
<body>
    <!-- 元素之间的关系
    父元素：直接包含子元素的元素 注意：直接包含
    子元素：直接被父元素包含的元素
    父子元素是相对来说的
    祖先元素：直接或简介包含后代元素的元素
    后代元素：直接或间接被祖先元素包含的元素
    兄弟元素：拥有相同父元素的元素
    -->
    <div>
        <span>我是div元素中的span。</span>
        <p><span>我是p元素中的span。</span></p>
    </div>
    <span>我是body元素中的span。</span>
</body>
</html>