Selektory Potomków CSS

Tak, masz rację. div p będzie pasować do poniższego przykładu, ale div > p nie będzie.

<div><table><tr><td><p> <!...

Pierwszy nazywa się selektorem Potomków , a drugi nazywa się selektorem Potomków.

Bascailly, " A b " wybiera wszystkie b wewnątrz a, podczas gdy" A>b " wybiera B Jakie są tylko dzieci a, nie wybiera B Jakie jest dziecko b Jakie jest dziecko a.

Ten przykład ilustruje różnicę:

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

Kolor tła abc i def będzie zielony, ale ghi będzie miał czerwony kolor tła.

Ważne: Jeśli zmienisz kolejność zasad do:

div>span{background:green}
div span{background:red}

Wszystkie litery będą miały czerwone tło, ponieważ selektor potomka wybiera również potomka.

Należy pamiętać, że selektor potomny nie jest obsługiwany w przeglądarce Internet Explorer 6. (Jeśli używasz selektora w selektorze jQuery/Prototype / YUI itp, a nie w arkuszu stylów, nadal działa)

W teorii: Dziecko = > bezpośredni potomek przodka (np. Joe i jego ojciec)

Descendant = > każdy element, który pochodzi od konkretnego przodka (np. Joe i jego pra-pra-pradziadek)

W praktyce: wypróbuj ten HTML:

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

Z tym CSS:

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

Http://jsfiddle.net/X343c/1/

div p 

Wybiera wszystkie elementy 'p', Gdzie rodzicem jest element ' div '

div > p

Oznacza to, że dzieci Zaznacza wszystkie elementy 'p', Gdzie rodzicem jest element' div '

Wybór CSS i zastosowanie stylu do określonego elementu można wykonać poprzez przejście przez element dom [Przykład

Przykład

.a .b .c .d{
    background: #bdbdbd;
}
div>div>div>div:last-child{
    background: red;
}

<div class='a'>The first paragraph.
 <div class='b'>The second paragraph.
  <div class='c'>The third paragraph.
   <div class='d'>The fourth paragraph.</div>
   <div class='e'>The fourth paragraph.</div>
  </div>
 </div>
</div>