前端-CSS后代选择器

上一篇文章给大家分享了多元素选择器，这篇给大家分享后代选择器。

后代选择器

后代选择器，是指选择某个元素包裹的所有元素，需要运用到空格来选择。下面通过具体的代码来看一下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                border: 1px solid red;
            }
            /*选中.box 下面的所有后代为p元素的元素 特点：可以影响.box 后面很多层*/
            .box p{
                color: red;
            }
            .box span{
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <p>p1</p>
            <h1>h1</h1>
            <div>
                <span>span</span>
                <p>p2</p>
                <div>
                    <p>p3</p>
                </div>
            </div>
        </div>
    </body>
</html>

上面代码中.box p{} 和.box span{}来选中div元素包裹的p、span元素。希望这篇文章对学习前端你的小伙伴有所帮助。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容