学习HTML与CSS的第三天————子元素和后代元素选择器

本文链接：https://blog.csdn.net/weixin_44055237/article/details/104401599

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"/>
      <title>子元素和后代元素选择器</title>
      <style type="text/css">
        /*span{
          color: red;
        }       在这里对span元素添加字体颜色时，页面中的所有span元素都被选中
        */

        /*
        *  为div中的span设置一个颜色为绿色
        * 这就用到了后代元素选择器
        * - 作用：
        *       - 选中指定元素的指定后代元素
        * - 语法：
        *       - 祖先元素 后代元素{}
        */
        div span{
          color: green;
        }   /*但是不管是那个div*/
        /*
        * 为div的子元素设置一个背景颜色为黄色
        * 子元素选择器
        *   - 作用：
        *         - 选中指定父元素的指定子元素
        *   - 语法：
        *         - 父元素 > 子元素
        * 
        */
        div > span{
          background-color: yellow;
        }
      </style>
    </head>
    <body>
     <!--
        元素之间的关系
            父元素：直接包含子元素的元素
            子元素：直接被父元素包含的元素
            祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
            后代元素：直接或简介被祖先元素包含的元素，子元素也是后代元素
            兄弟元素：拥有相同父元素的元素叫做兄弟元素
     -->
     <div>
       <span>我是div标签中的span</span>
       <p><span>我是p标签中的span</span></p>
     </div>
     <span>我是span</span>
    </body>
</html>

疫情期间在家封闭的第26天，愿灾祸尽早褪去