css基础——子元素和后代元素选择器

最新推荐文章于 2022-06-22 11:17:23 发布

蜗牛式学编程

最新推荐文章于 2022-06-22 11:17:23 发布

阅读量574

点赞数

分类专栏： # html/css 学习笔记文章标签： css html

本文链接：https://blog.csdn.net/weixin_45556926/article/details/114140463

版权

html/css 学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

元素之间的关系

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

后代元素选择器

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

子元素选择器

作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
IE6及一下的浏览器不支持子元素选择器

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>子元素和后代元素选择器</title>
        <style>
            /*
                为 id 为d1 的span元素设置成绿色
            */
            #d1 span{
                color:green;
            }

            /*
                选中id为d1中的div中的p元素中的span元素
            */
            #d1 p span{
                font-size:25px;
            }

            /*
                为div的子元素span设置一个背景颜色为黄色
            */
            div > span{
                background-color:yellow;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <span>我是div标签中的span</span>
            <p>
                <span>我是一个p标签中的span</span>
            </p>
        </div>

        <div>
            <span>我是body中的span元素</span>
        </div>
       
    </body>
</html>

蜗牛式学编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础——子元素和后代元素选择器

元素之间的关系父元素：直接包含子元素的元素子元素：直接被父元素包含的元素祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素兄弟元素：拥有相同父元素的元素叫兄弟元素后代元素选择器作用：选中指定元素的指定后代元素语法：祖先元素后代元素{ }子元素选择器作用：选中指定父元素的指定子元素语法：父元素 > 子元素IE6及一下的浏览器不支持子元素选择器<!doctype html><ht
复制链接

扫一扫

专栏目录