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

159

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

css css-selectors Sam152
источник
1
Помните, что для этого требуется Windows Internet Explorer 7 или более поздняя версия. Или FF или какой-нибудь современный браузер. http://msdn.microsoft.com/en-us/library/aa358819(VS.85).aspx
Вили
Кстати,> обычно известно как «больше чем» (или, строго говоря, неправильно, как правая угловая скобка).
Ричард
1
Возможный дубликат Что означает CSS-селектор ">"?
TZHX

Ответы:

201

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

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

tpdi
источник
6
Однако, предостережение - это не поддерживается в ie6
wheresrhys
138 
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>
Брайан Кэмпбелл
источник
7
Хороший, понятный пример. хотя ответ tpdi был полезным, этот действительно облегчил понимание.
Дж. Скотт Элблейн
8

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

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

div.resources > a{color: white;}

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

Адам Александр
источник