W jaki sposób znak „większe niż” lub „>” jest używany w CSS?

159

Widziałem ten znak wiele razy w plikach CSS, ale nie mam pojęcia, jak jest używany. Czy ktoś może mi to wyjaśnić i pokazać, w jaki sposób są przydatne w ułatwianiu stylu strony?

css css-selectors Sam152
źródło
1
Należy pamiętać, że wymaga to przeglądarki Windows Internet Explorer 7 lub nowszej. Albo FF albo jakaś nowoczesna przeglądarka. http://msdn.microsoft.com/en-us/library/aa358819(VS.85).aspx
Vili
BTW,> jest zwykle znane jako „większe niż” (lub, ściśle mówiąc błędnie, jako prawy nawias kątowy).
Richard,
1
możliwy duplikat Co oznacza selektor CSS „>” (znak większości)?
TZHX

Odpowiedzi:

201

To selektor potomny CSS. P > SPANoznacza zastosowanie stylu, który następuje do wszystkich znaczników SPAN, które są elementami podrzędnymi Pznacznika.

Zauważ, że „dziecko” oznacza „bezpośredniego potomka”, a nie byle jakiego potomka. P SPANjest selektorem elementu podrzędnego , stosującym styl, który następuje do wszystkich SPANznaczników Ppodrzędnych znacznika lub rekurencyjnie podrzędnych dowolnego innego znacznika, który jest elementem podrzędnym / potomnym Pznacznika. P > SPANdotyczy tylko SPANtagów, które są elementami Ppodrzędnymi tagu.

tpdi
źródło
6
Uwaga jednak - nie jest obsługiwana w ie6
wheresrhys
138 
p em

dopasuje wszystko, <em>co znajduje się w <p>. Na przykład będzie pasował do następujących <em>s:

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

Z drugiej strony,

p > em

Dopasuje tylko <em>te elementy, które są bezpośrednimi potomkami <p>. Więc będzie pasować: 

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

Ale nie:

<p><strong><em>foo</em></strong></p>
Brian Campbell
źródło
7
Ładny, jasny przykład. chociaż odpowiedź tpdi była pomocna, ta naprawdę ułatwiła zrozumienie.
J. Scott Elblein
8

jest to znane jako Child Combinator:

Dodano selektor kombinatora podrzędnego, aby móc stylizować zawartość elementów zawartych w innych określonych elementach. Załóżmy na przykład, że ktoś chce ustawić kolor biały jako kolor hiperłączy wewnątrz znaczników div dla określonej klasy, ponieważ mają one ciemne tło. Można to osiągnąć, używając kropki, aby połączyć element div z zasobami klasy i znak większości jako kombinator, aby połączyć parę z a, jak pokazano poniżej:

div.resources > a{color: white;}

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

Adam Alexander
źródło