“>”（大于号）CSS选择器是什么意思？

Question

例如：

div > p.some_class {
  /* Some declarations */
}

这个>标志到底是什么意思？

Answer 1

>是子组合器，有时会误称为直接后代组合器。1个

这意味着选择器div > p.some_class仅选择 直接.some_class嵌套 在内 的div段落，而不选择嵌套
在 其 内 的任何段落。

插图：

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

选择了什么，没有选择什么：

1. 选择
   这p.some_class直接位于内部的div，因此在这两个元素之间建立了父子关系。
   

2. 没有选择
   这p.some_class是由包含blockquote内div，而不是div本身。尽管这p.some_class是的后代div，但它不是孩子。是孙子
   

因此，虽然div > p.some_class不匹配此元素，但divp.some_class将使用后代组合器。

1 许多人甚至将其称为“直子”或“直子”，但这是完全没有必要的（对我来说是令人讨厌的），因为 从定义 上来说，子元素 始终是直接的 ，因此它们的含义完全相同。没有所谓的“间接孩子”。