css - ">"(大于号)CSS 选择器是什么意思？

Question

例如:

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

> 符号到底是什么意思？

Answer 1

> 是 child combinator ，有时被错误地称为直接后代组合子。¹

这意味着选择器 div > p.some_class 只匹配 .some_class 中直接嵌套在 div< 中的段落，而不是嵌套在其中的任何段落。这意味着匹配 div > p.some_class 的每个元素也必然匹配 div p.some_class，descendant combinator (空间)，所以这两者经常被混淆是可以理解的。

比较子组合器和后代组合器的图示:

div > p.some_class { 
    background: yellow;
}

div p.some_class { 
    color: red;
}

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

哪些元素与哪些选择器匹配？

1. 同时匹配 div > p.some_class 和 div p.some_class
   此 p.some_class 直接位于 div 内部，因此在两个元素之间建立了父子关系。由于“child”是一种“后代”，因此根据定义，任何子元素也是后代。因此，这两个规则都适用。

2. 只匹配div p.some_class
   此 p.some_class 包含在 div 中的 blockquote 中，而不是 div 本身。尽管此 p.some_class 是 div 的后代，但它不是子代；这是一个孙子。因此，仅应用其选择器中具有后代组合子的规则。

---

¹ _{许多人更进一步称它为“直接子元素”或“直接子元素”，但这完全没有必要(而且对我来说非常烦人)，因为子元素 反正根据定义是直接的，所以它们的意思完全一样。没有所谓的“间接 child ”。}