CSS 选择器差异 : element element vs element>element

Question

下面两个CSS选择器有什么区别？

来自解释here ，它们听起来一样吗？

div p{}

选择div元素内的所有p元素

div > p{}

选择父级为 div 元素的所有 p 元素。

Answer 1

区别在于深度。 w3schools 网站没有很好解释的是 E>F 只匹配 E 的直接子级，而 E F 匹配任何深度的后代.

使用您的示例 CSS，考虑以下 HTML 片段:

<div>
    <p id="paragraph1">I'm paragraph 1</p>
    <ul>
        <li><p id="paragraph2">I'm paragraph 2</p></li>
    </ul>
</div>

第一个规则集 div p 将匹配两个 p block 。第二个 div > p 将只匹配 paragraph1。