Что означает ">" в ​​CSS?

Возможный дубликат:
Что означает " > " в правилах CSS?

Что означает символ > в CSS? Я заметил это в своей теме блога Wordpress и хочу знать, что он делает.

#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
    background: #efefef;
}
#access li:hover > a,
#access a:focus {
    background: #f9f9f9; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    color: #373737;
}
#access ul li:hover > ul {
    display: block;
}

Ответы

Ответ 1

это означает, что будут нацелены только "первые вложенные" элементы ( "дочерние" элементы), например

   <div id="a">
       <div id="b">
         <div id="c">
       </div>
      </div>
    </div>

если вы пишете

#a div{
 background: red;
}

то и #b и #c будут красными, но если вы используете > как

#a > div{
 background: red;
}

тогда только #b будет красным, #c не будет.

Ответ 2

Это дочерний селектор (также называемый детским комбинатором). Вы можете узнать больше о селекторах на веб-сайте консорциума World Wide Web (W3C), где вы можете прочитать запись CSS2 в дочернем селекторе или вы можете перейти прямо к записи CSS3 в селекторе дочерних элементов.

Кроме того, здесь отличная цитата из другого SO-вопроса о CSS Child vs Descendant selectors:

Подумайте, что означают слова "ребенок" и "потомок" на английском языке:

  • Моя дочь и мой ребенок, и мой потомок

  • Моя внучка не мой ребенок, но она мой потомок.

Ответ 3

li > a соответствует любому элементу, являющемуся дочерним элементом li. См. страницу W3C CSS для любых селекторов.