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

例如：

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

>符号究竟是什么意思？

---

#1楼

html

<div> <p class="some_class">lohrem text (it will be of red color )</p> <div> <p class="some_class">lohrem text (it will NOT be of red color)</p> </div> <p class="some_class">lohrem text (it will be of red color )</p> </div>

的CSS

div > p.some_class{ color:red; }

全部带有.some_class <p>的直接子代都将应用样式。

---

#2楼

全部具备some_class类的p标签都是div标签的直接子代。

---

#3楼

它匹配直接位于div下的具备some_class类的p元素。

---

#4楼

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

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

插图：

<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由div的blockquote包含，而不是由div自己包含。 尽管此p.some_class是div的后代，但它不是孩子。 是孙子

   所以，虽然div > p.some_class与该元素不匹配，但div p.some_class将使用后代组合器代替。

---

¹ _{许多人甚至将其称为“直子”或“直子”，但这是彻底没有必要的（对我来讲是使人讨厌的），由于从定义上来讲，子元素始终是直接的 ，所以它们的含义彻底相同。 没有所谓的“间接孩子”。}

---

#5楼

正如其余人提到的，它是一个子选择器。 这是适当的连接。

http://www.w3.org/TR/CSS2/selector.html#child-selectors