CSS后代选择器“空格”和“>”的使用辨析

转载于 2020-03-11 23:26:35 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

HTML5+CSS|CSS3 专栏收录该内容

159 篇文章

订阅专栏

本文详细解析了CSS中后代选择器的使用方法，包括空格和“>”符号的区别，通过具体示例展示了如何精确选择元素及其后代，帮助读者深入理解并正确应用CSS选择器。

要点：

“空格”：包含子孙
“>”：含子不含孙

举个栗子：

html代码如下

<body>
    <div class="parent">
        <p>1p</p>
        <div>2div
            <p>-2.1p</p>
            <p>-2.2p</p>
            <a>-2.3a</a>
        </div>
        <p>3p</p>
        <p>4p</p>
    </div>
</body>

css代码（带空格的后代选择）：

.parent p {
    background: red;
}

结果：子代1p 3p 4p 及孙代 2.1p，2.2p都选上了
在这里插入图片描述
css代码（带“>”的后代选择）：

.parent > p {
     background: red;
 }

结果：只有子代1p 3p 4p 选上
在这里插入图片描述