css选择器中 > 表示什么？

Question

在选择器中，
div p {....}
和
div > p {....}

有没有差别？ 有的话，能否举个例子？
我试了几个，都是没有差别的。

Answer 1

• div p {}

div 下所有的 p 标签

• div > p {}

div 下的 p 标签子元素

• div + p {}

div 相邻的 p 标签元素

• div ~ p {}

div 同级的所有 p 标签元素

我觉得吧，如果要了解，那应该多了解几个这类相似的选择符。
附带一下好早好早之前写的一篇水文
https://mp.weixin.qq.com/s?__...

Answer 2

div p {....} 后代选择器，选择 div 下的所有 p ；

div > p {....} 子代选择器 选择 div 子级的 p ；

    <div class="box">
        <p id="1"></p>
        <div>
            <p id="2"></p>
        </div>
    </div>

.box p{} 选择id=1 和 id=2 的p
.box > p{} 选择 id=1的p

Answer 3

“直接子元素选择器”
这样说是不是能明白？

Answer 4

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
参考链接

Answer 5

后代和儿子的区别。

Answer 6

div >p{}选不到div子元素下的p