CSS-子元素选择器

说明：

1.子元素选择器，只能选择作为某元素的子元素。
2.子选择器使用：大于号">",进行分割

<html>
<head>
    <style>
    .div1 .div1-1 .div1-1-p{
        color: red;
    }

    .div2 .div2-1 > .div2-1-p{
        color: blue;
    }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div1-1">
            <p class="div1-1-p">包含选择器,div1-1-p是div1-1的子级,    可以渲染</p>
            <div>
                <p class="div1-1-p">包含选择器,div1-1-p不是div1-1的子级    可以渲染</p>
            </div>
        </div>
    </div>

    <div class="div2">
        <div class="div2-1">
            <p class="div2-1-p">包含选择器2, div1-1-p是div1-1的子级    可以渲染</p>
            <div>
                <p class="div1-1-p">包含选择器,div1-1-p不是div1-1的子级    不不不可以渲染</p>
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

posted @ 2020-01-19 17:51  预立科技  阅读(54)  评论(0)    收藏  举报