Jestem trochę zdezorientowany między tymi dwoma selektorami.
Czy potomek selektor:
div p
wybierz wszystko p
w obrębie div
tego, czy jest to natychmiastowe przyzwolenie? Więc jeśli p
jest 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?
css
css-selectors
iceangel89
źródło
źródło
Odpowiedzi:
Pomyśl tylko, co oznaczają słowa „dziecko” i „potomek” w języku angielskim:
źródło
Tak, masz rację.
div p
będzie pasować do następującego przykładu, alediv > p
nie będzie.Pierwszy nazywa się selektorem potomnym, a drugi nazywa się selektorem potomnym .
źródło
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ę:
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:
Wszystkie litery będą miały czerwone tło, ponieważ selektor potomka wybiera także dziecko.
źródło
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:
z tym CSS:
http://jsfiddle.net/X343c/1/
źródło
red
iblue
zamieniono).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)
źródło
Wybiera wszystkie elementy „p”, w których element nadrzędny jest elementem „div”
Oznacza to, że bezpośrednie elementy potomne Wybiera wszystkie elementy „p”, w których element nadrzędny jest elementem „div”
źródło
Wyboru CSS i zastosowania stylu do określonego elementu można dokonać przez przejście przez element dom [Przykład
Przykład
źródło