“>”(大于符号)CSS选择器是什么意思？

Question

“>”(大于符号)CSS选择器是什么意思？例如：div > p.some_class {   /* Some declarations */}What exactly does the>sign mean?

Answer 1

>是子组合器，有时错误地称其为直系后代组合器。¹

这意味着选择器div > p.some_class只选择.some_class嵌套的直接在里面 a 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不符合这个元素，div p.some_classWill，使用后代组合子相反。

---

¹ _{许多人更进一步称它为“直接的孩子”或“直接的孩子”，但这是完全没有必要的(对我来说也是令人难以置信的烦人)，因为一个子元素立即按定义总之，他们的意思是完全一样的。没有所谓的“间接孩子”。}

Answer 2

相配p类元素some_class那是直接在.下div.