「>」（大於號）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