Selektory CSS Child vs. Descendant

Jestem trochę zdezorientowany między tymi dwoma selektorami.

Czy potomek selektor:

div p

wybierz wszystko pw obrębie divtego, czy jest to natychmiastowe przyzwolenie? Więc jeśli pjest w innym div, nadal będzie wybrany?

Następnie selektor podrzędny :

div > p

Co za różnica? Czy dziecko oznacza natychmiastowe dziecko? Na przykład.

<div><p>

vs

<div><div><p>

czy oba zostaną wybrane, czy nie?

Pomyśl tylko, co oznaczają słowa „dziecko” i „potomek” w języku angielskim:

• Moja córka jest zarówno moim dzieckiem, jak i potomkiem
• Moja wnuczka nie jest moim dzieckiem, ale jest moim potomkiem.

Tak, masz rację. div pbędzie pasować do następującego przykładu, ale div > pnie będzie.

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

Pierwszy nazywa się selektorem potomnym, a drugi nazywa się selektorem potomnym .

Zasadniczo „ ab ” wybiera wszystkie b wewnątrz a, podczas gdy „ a> b ” wybiera b, które są tylko dziećmi do a , nie wybiera b, co jest dzieckiem b, co jest dzieckiem 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: W przypadku zmiany kolejności reguł na:

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

Wszystkie litery będą miały czerwone tło, ponieważ selektor potomka wybiera także dziecko.

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

Potomek => każdy element, który pochodzi od konkretnego przodka (np. Joe i jego prapradziadek)

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/

Pamiętaj, że selektor potomny nie jest obsługiwany w programie Internet Explorer 6. (Jeśli używasz selektora w selektorze jQuery / Prototype / YUI itp., A nie w arkuszu stylów, nadal działa)

div p 

Wybiera wszystkie elementy „p”, w których element nadrzędny jest elementem „div”

div> p

Oznacza to, że bezpośrednie elementy potomne Wybiera wszystkie elementy „p”, w których element nadrzędny jest elementem „div”

Wyboru CSS i zastosowania stylu do określonego elementu można dokonać przez 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>