Как символ «больше чем» или «>» используется в CSS?

Я видел этот символ несколько раз в файлах CSS, но я не знаю, как его использовать. Может кто-нибудь объяснить мне и показать, как они полезны для облегчения стиля страницы?

Это дочерний селектор CSS. P > SPANозначает применение стиля, который следует за всеми тегами SPAN, которые являются потомками Pтега.

Обратите внимание, что «ребенок» означает «непосредственный потомок», а не просто любой потомок. P SPANявляется селектором потомков , применяющим стиль, который следует за всеми SPANтегами, которые являются потомками Pтега или рекурсивно дочерними по отношению к любому другому тегу, который является потомком / потомком Pтега. P > SPANприменяется только к SPANтегам, которые являются дочерними по отношению к Pтегу.

p em

будет соответствовать любому, <em>что находится внутри <p>. Например, он будет соответствовать следующим <em>s:

<p><strong><em>foo</em></strong></p>
<p>Text <em>foo</em> bar</p>

С другой стороны,

p > em

Будет соответствовать только <em>s, которые являются непосредственными детьми <p>. Таким образом, это будет соответствовать:

<p>Text <em>foo</em> bar</p>

Но нет:

<p><strong><em>foo</em></strong></p>

это известно как детский комбинатор:

Был добавлен дочерний селектор комбинатора, чтобы иметь возможность стилизовать содержимое элементов, содержащихся в других указанных элементах. Например, предположим, что кто-то хочет установить белый цвет в качестве цвета гиперссылок внутри тегов div для определенного класса, потому что у них темный фон. Это может быть достигнуто путем использования точки для объединения div с ресурсами класса и знака «больше» в качестве комбинатора для объединения пары с a, как показано ниже:

div.resources > a{color: white;}

(с http://www.xml.com/pub/a/2003/06/18/css3-selectors.html )

E > F

Соответствует любому элементу F, который является дочерним элементом элемента E.

больше на http://www.w3.org/TR/CSS21/selector.html#child-selectors