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

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

<p>это дочерний селектор css. <code>p > span</code> означает применение стиля, который следует за всеми тегами span, которые являются потомками тега <code>p</code>.</p><p>обратите внимание, что "ребенок" означает "непосредственный потомок", а не просто любой потомок. <code>p span</code> - это <em>селектор потомков</em>, применяющий стиль, который следует за всеми тегами <code>span</code>, являющимися потомками тега <code>p</code> или рекурсивными потомками любого другого тега, который является потомком/потомком тега <code>p</code>. <code>p > span</code> применяется только к тегам <code>span</code>, которые являются потомками тега <code>p</code>.</p>

<pre><code>p em </code></pre><p>будет соответствовать любому <code><em></code>, который находится внутри <code><p></code>. например, он будет соответствовать следующим <code><em></code>s:</p><pre><code><p><strong><em>foo</em></strong></p> <p>text <em>foo</em> bar</p> </code></pre><p>с другой стороны,</p><pre><code>p > em </code></pre><p>будет соответствовать только <code><em></code>s, которые являются непосредственными потомками <code><p></code>. таким образом, это будет соответствовать:</p><pre><code><p>text <em>foo</em> bar</p> </code></pre><p>но нет:</p><pre><code><p><strong><em>foo</em></strong></p> </code></pre>

<p>это известно как детский комбинатор:</p><blockquote> <p>был добавлен дочерний селектор комбинатора, чтобы иметь возможность стилизовать содержимое элементов, содержащихся в других указанных элементах. например, предположим, что кто-то хочет установить белый цвет в качестве цвета гиперссылок внутри тегов div для определенного класса, потому что у них темный фон. это может быть достигнуто путем использования точки для объединения div с ресурсами класса и знака "больше" в качестве комбинатора для объединения пары с a, как показано ниже:</p> </blockquote><pre><code>div.resources > a{color: white;} </code></pre><p>(из <a href="http://www.xml.com/pub/a/2003/06/18/css3-selectors.html">http://www.xml.com/pub/a/2003/06/18/css3-selectors.html</a> )</p>

<blockquote> <pre><code>e > f </code></pre> <p>соответствует любому элементу f, являющемуся дочерним элементом элемента e.</p> </blockquote><p>подробнее о <a href="http://www.w3.org/tr/css21/selector.html#child-selectors">http://www.w3.org/tr/css21/selector.html#child-selectors</a> </p>