如何理解css里面的亲代子元素选择器？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文说一下css选择器中的一代子元素选择器的使用方式，这个选择器就是大于符号>，也可以说是右箭头>。使用方式是父元素>子元素，那么，它和平时最常见的父元素 子元素使用方式，有什么不同呢？这就是本文中，苏南大叔将要探讨的内容。

苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。测试环境：谷歌浏览器。

测试代码

测试代码html结构如下：

<div id="container">
    <div>
        <div>
            <div>
                <div></div>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div>
                <div></div>
            </div>
        </div>
    </div>
</div>

css部分

div#container div {
    margin: 10px;
    padding: 10px;
    background-color: blue;
}

div#container>div {
    background-color: pink;
}

div#container>div>div {
    background-color: yellow;
}

div#container>div>div>div>div {
    background-color: red;
}

所有的div通过 div都设置了背景色blue，第一层div通过>div设置了背景色pink，第二层设置背景色yellow，第三层使用全局设置blue，第四层通过>div设置了背景色red。

结论是：>只作用于子元素中的第一代，就是紧贴着父元素的那一层。

结束语

凑文字啊，哈哈。给个链接，你自己看看吧！

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。