0009-元素关系及选择器-前端学习笔记 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        /* 为div中的span设置一个颜色为绿色
            后代元素选择器
                -语法： 祖元素 后代元素{}
            */
        div span{color:greenyellow;}
        /* 选中id为d1的div中的p元素中的span元素，设置字体大小
                -语法： #d1 p span
            */
        #d1 p span{font-size:40px;}
        /* 为div的子元素span元素，设置一个背景色为黄色
                子元素选择器
                  -作用：选中指定父元素的指定子元素
                  -语法： 父元素 > 子元素
            *IE6及以下浏览器不支持子元素选择器；
            */
        div > span{background-color: yellow;}

    </style>

</head>
<body>
    <!-- 
        父元素：直接包含子元素的元素
        子元素：被父元素直接包含的子元素
        祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
        后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
        兄弟元素：拥有相同父元素
     -->
    <div>
        <span>我是div元素中的span</span>
        <p><span>我是p元素中的span</span></p>
    </div>
    <div id="d1">
        <span>我是id为d1中的div元素中的span</span>
        <p><span>我是p元素中的span</span></p>
    </div>
    <span>我是body中的span</span>
</body>
</html>

 

我是div元素中的span

我是p元素中的span

我是id为d1中的div元素中的span

我是p元素中的span

我是body中的span

posted @ 2018-04-04 01:15  Karlkaijie  阅读(89)  评论(0)    收藏  举报