CSS的子代选择器与后代选择器

最新推荐文章于 2024-06-13 22:49:40 发布

dizhenbo7454

最新推荐文章于 2024-06-13 22:49:40 发布

阅读量242

点赞数

原文链接：http://www.cnblogs.com/yuhaiyang/p/6211724.html

版权

定义如下结构：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            div{
                background-color: white;
            }
            /*  父亲样式 */
            .father{
                height: 200px;
                width: 200px;
                background-color: red;
                padding: 20px;
            }
        </style>
    </head>
    <body>
    <div class="father">
        父亲
        <div>
            儿子
            <div>
                孙子
            </div>
        </div>
    </div>    
    </body>
</html>

运行结果如图

然后我们在<style>标签里增加一个子代选择器

.father > div{
    background-color: green;
}

运行结果如图

可见子代：【儿子】那个div已经变为绿色。

然后我们去掉子代选择器，添加一个后代选择器

.father div{
    background-color: yellow;
}

运行结果如图

可见后代：【儿子】和【孙子】的div已经变为黄色。

转载于:https://www.cnblogs.com/yuhaiyang/p/6211724.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dizhenbo7454

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的子代选择器与后代选择器

定义如下结构：<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> div{ background-color: white;...
复制链接

扫一扫