Selektory CSS Child vs. Descendant

298

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?

iceangel89
źródło
Próbowałem tu szczegółowo wyjaśnić , mogę odnieść się tylko, jeśli jest to pomocne dla kogoś ...
Pan Alien

Odpowiedzi:

468

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.
RichieHindle
źródło
49
Ważna uwaga jest taka, że ​​selektor potomny będzie szybszy niż selektor potomny, co może mieć widoczny wpływ na stronach zawierających 1000 elementów DOM.
Jake Wilson
Dobra odpowiedź, ale dodam również bezpośrednie odpowiedzi do jego przykładów w pytaniu - po prostu, żeby było to absurdalnie jasne.
JoeCool,
45

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 .

Çağdaş Tekin
źródło
23

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.

Ignas2526
źródło
Dodana sekcja „Ważne” uzupełnia tę odpowiedź. Dzięki!
Aakash Verma,
10

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/

Snowcrash
źródło
Ciekawe, w której przeglądarce przetestowałeś ją, ponieważ wydaje się, że naprawdę działa
yoel halb
3
Do Twojej wiadomości, CSS w odpowiedzi nie pasuje do CSS w JSFiddle ( redi bluezamieniono).
Pang
7

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)

rlovtang
źródło
myślę, że używam tego w css. ale w jquery wykrywam, czy przeglądarka to ie6 (w jquery mogę to zrobić? czy muszę użyć <! - [if IE 6]>) i dodać klasę
iceangel89
2
jquery ma funkcję wąchania zamiast wąchania przeglądarki, więc nie sądzę, że można wykryć, czy przeglądarka to ie6. I nie powinieneś. Najlepiej jest dołączyć dodatkowy arkusz stylów dla ie6 z komentarzami warunkowymi, tak jak opisano.
rlovtang
4
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”

użytkownik3351229
źródło
-1

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>
Aravind Cheekkallur
źródło